I'm trying to make the links in the navigation bar go in the centre, if someone can tell me how to do this is, i'd be grateful. I have included the HTML and CSS code below.
<div class="menu">
<ul>
<li>Home</li>
<li>Home two</li>
<li>About</li>
<li>Basket</li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
.menu {
width: 100%;
background: url('img/menu-bg.png') repeat-x;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
height: auto;
display: block;
margin-top: 10px;
font-family: BentonSansBook, sans-serif;
position: relative;
padding: 10px;
display: block;
z-index: 10;
font-family: BentonSansBook, sans-serif;
-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
font-size: 12px;
line-height: 16px;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: normal;
text-decoration: none;
cursor: pointer;
color: #000;
}
}
.menu ul {
list-style: none;
margin: 0;
}
.menu ul li {
list-style: none;
float: left;
display: block;
}
.menu ul li a {
color: #000;
display: block;
text-decoration: none;
font-weight: 700;
padding: 10px 15px;
text-transform: uppercase;
}
.menu ul li a:hover {
color: #fff;
background: #5d4442;
}
I think more useful CSS is:
.menu {
position: relative;
width: 100%;
margin-top: 10px;
padding: 10px;
background: url('img/menu-bg.png') repeat-x;
border-radius: 5px;
z-index: 10;
font: 400 12px/16px BentonSansBook, sans-serif;
-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
letter-spacing: .2em;
cursor: pointer;
}
.menu ul {
margin: 0;
display: flex;
flex-wrap: nowrap;
justify-content: center;
list-style: none;
}
.menu ul li a {
padding: 10px 15px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
color: #000;
}
.menu ul li a:hover {
background: #5d4442;
color: #fff;
}
And delete CLEARFIX in html.
Related
I'm trying to build a small support website for a community. Now I have tried to recreate my dropdown, several times but I can't see where it goes wrong.
When I code it everything works normal, problem is when I put it together with navbar, something is pushing the text to the right, and generate a small box on the left so the menu wouldn't be right below.
.subbtn {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 14px;
}
.submenu {
position: relative;
display: inline-block;
}
.submenu-content {
display: none;
position: absolute;
min-width: 86px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.submenu-content a {
color: #0d0d0d;
padding: 14px;
text-decoration: none;
display: block;
}
.submenu:hover .submenu-content {
display: block;
}
.submenu:hover .subbtn {
color: white;
background: #403c36;
opacity: 0.8;
}
.navbar_1 {
font-family: Arial;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar_item {
display: block;
text-transform: uppercase;
font-weight: bold;
}
.navbar_1 a {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 14px;
color: #0d0d0d;
}
.navbar_1 a:hover {
color: white;
background: #403c36;
opacity: 0.8;
}
<ul class="navbar_1">
<li class="navbar_item">
nyheder
<div class="submenu">
<div class="subbtn">information</div>
<ul class="submenu-content">
regler
vedtægter
Hvem er vi
bestyrelsen
</ul>
</div>
bliv medlem
medlemsfordele
kontakt
</li>
</ul>
If I'm understanding correctly, the solution is very simple.
As isherwood mentioned, a list comes with a default padding on the left.
My advice is, to give your <ul> element a fixed padding by adding this to your CSS:
ul {
padding: 4px; // or 0; if you prefer controlling the padding through the list items
}
That should do the trick!
If that's not wat you meant, please be more specific in your topic (by using screenshots for example)
.subbtn {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 14px;
}
.submenu {
position: relative;
display: inline-block;
}
.submenu-content {
display: none;
position: absolute;
min-width: 86px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
padding: 4px; /* <----------------------------------------- HERE */
}
.submenu-content a {
color: #0d0d0d;
padding: 14px;
text-decoration: none;
display: block;
}
.submenu:hover .submenu-content {
display: block;
}
.submenu:hover .subbtn {
color: white;
background: #403c36;
opacity: 0.8;
}
.navbar_1 {
font-family: Arial;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar_item {
display: block;
text-transform: uppercase;
font-weight: bold;
}
.navbar_1 a {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 14px;
color: #0d0d0d;
}
.navbar_1 a:hover {
color: white;
background: #403c36;
opacity: 0.8;
}
<ul class="navbar_1">
<li class="navbar_item">
nyheder
<div class="submenu">
<div class="subbtn">information</div>
<ul class="submenu-content">
regler
vedtægter
Hvem er vi
bestyrelsen
</ul>
</div>
bliv medlem
medlemsfordele
kontakt
</li>
</ul>
I'm trying to make the white "Contact US" text remain active or white, while the user rolls over the button and then hovers down to the list of links. I feel like I'm just circling a very simple answer. You'll notice it turns from red to white and then back to red when you rollover the dropdown menu. How do I keep it white when you rollover the menu below it?
I'm still in the process of cleaning up the code and adjusting the button, but I stripped out all the unnecessary bits.
JSFiddle: https://jsfiddle.net/hvj675mo/6/
<style>body {
background-color: #000000;
}
.new-contact-us {
background-color: transparent;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
border: 2px solid #ce1818;
display: inline-block;
cursor: pointer;
font-family: Arial;
font-size: 14px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
line-height: 10px;
color: #ce1818;
}
.new-contact-us:hover {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
.new-contact-us:active {
position: relative;
/*top:1px;*/
color: #ffffff;
background-color: #ce1818;
}
/**** START BOX DIV ****/
.new-contact-us-box {
position: relative;
display: block;
}
.new-contact-us-box:active {
color: #ffffff;
}
/**** START DROPDOWN ****/
.new-contact-us-box ul li {
padding-bottom: 10px;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ababaa;
text-transform: none;
}
.new-contact-us-box ul li a {
color: #ce1818;
text-decoration: none;
}
.new-contact-us-box ul li a:hover {
text-decoration: underline;
}
.new-contact-us-box ul li a:active {
text-decoration: underline;
}
.container-contact {
float: left;
width: 296px;
margin 0px;
}
.new-contact-us-box ul {
padding-left: 0px;
list-style: none;
margin: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover {
position: relative;
display: inline-block;
background-color: #ce1818;
color: #ffffff;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
left: auto !important;
right: 0 !important;
}
</style>
<div style="width: 700px; padding-left: 600px">
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->
<div class="new-contact-us-box dropdown">
CONTACT US
<div class="dropdown-content">
<ul style="width: 296px; left: auto !important; right: 0 !important; padding: 20px;">
<li>
<div class="container-contact">
<ul>
<li>Hello</li>
<li><img src="####" style="margin-right: 10px;">#########</li>
<li style="margin-left: 28px; margin-top: -9px"> BlAH BLAH</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->
You have hover on both .new-contact-us-box and .new-contact-us. So you can change this:
.new-contact-us:hover {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
to this:
.new-contact-us-box:hover .new-contact-us {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
See demo below:
body {
background-color: #000000;
}
.new-contact-us {
background-color: transparent;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
border: 2px solid #ce1818;
display: inline-block;
cursor: pointer;
font-family: Arial;
font-size: 14px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
line-height: 10px;
color: #ce1818;
}
.new-contact-us-box:hover .new-contact-us {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
.new-contact-us:active {
position: relative;
/*top:1px;*/
color: #ffffff;
background-color: #ce1818;
}
/**** START BOX DIV ****/
.new-contact-us-box {
position: relative;
display: block;
}
.new-contact-us-box:active {
color: #ffffff;
}
/**** START DROPDOWN ****/
.new-contact-us-box ul li {
padding-bottom: 10px;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ababaa;
text-transform: none;
}
.new-contact-us-box ul li a {
color: #ce1818;
text-decoration: none;
}
.new-contact-us-box ul li a:hover {
text-decoration: underline;
}
.new-contact-us-box ul li a:active {
text-decoration: underline;
}
.container-contact {
float: left;
width: 296px;
margin 0px;
}
.new-contact-us-box ul {
padding-left: 0px;
list-style: none;
margin: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover {
position: relative;
display: inline-block;
background-color: #ce1818;
color: #ffffff;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
left: auto !important;
right: 0 !important;
}
</style>
<div style="width: 700px; padding-left: 600px">
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING--->
<div class="new-contact-us-box dropdown">
CONTACT US
<div class="dropdown-content">
<ul style="width: 296px; left: auto !important; right: 0 !important; padding: 20px;">
<li>
<div class="container-contact">
<ul>
<li>Hello</li>
<li><img src="####" style="margin-right: 10px;">#########</li>
<li style="margin-left: 28px; margin-top: -9px"> BlAH BLAH</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->
Change your CSS
.new-contact-us:hover {
background-color:#ce1818;
font-family:Arial;
font-size:14px;
font-weight:bold;
color: #ffffff;
}
to this:
.dropdown:hover .new-contact-us {
background-color:#ce1818;
font-family:Arial;
font-size:14px;
font-weight:bold;
color: #ffffff;
}
For some reason, when I hover over my navigation items, the drop downs are appearing on the very left of the screen instead of under that menu item and I can't figure out why. If anybody could help, it would be greatly appreciated.
Here's my code (JSFIDDLE: http://jsfiddle.net/A5jtC/):
HTML:
<div id="nav" class="wrapper">
<ul class="site-navigation">
<li>About</li>
<li>Work
<ul>
<li>Testing</li>
</ul>
</li>
</ul>
</div>
CSS:
.wrapper{
width: 1000px;
background-color: rgb(255,255,255);
margin: 0 auto;
overflow: hidden;
}
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
padding: 50px 0 47px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
width: 100px;
height: 30px;
position: absolute;
top: 125px;
left: 0;
display: none;
z-index: 1000;
}
ul.site-navigation ul li {
float: none;
line-height: 30px;
}
ul.site-navigation ul li a {
transition:none;
font-weight: regular;
font-size: 14px;
}
ul.site-navigation li:hover ul {
display: block;
}
Try this css, it might get you to where you need to be:
.wrapper{
width: 100%;
background-color: rgb(255,255,255);
margin: 0 auto;
overflow: hidden;
}
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li{
display: block;
width: 125px;
float: left;
}
ul.site-navigation li a{
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
padding: 50px 0 47px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation li>ul {
list-style: none;
height: 50px;
position: relative;
display: none;
z-index: 1000;
}
ul.site-navigation li>ul>li {
float: none;
line-height: 50px;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 20px;
}
ul.site-navigation>li:hover ul {
display: block;
}
You've got a couple of issues.
First, in order to have an element that appears under another element, the parent element has to be position: relative; and the direct child position: absolute;.
Next, your overflow:hidden on your wrapper element would hide any child that appears below the parent.
Third, your list items had to be floated and given a width x height, otherwise the browser thinks they all line up on the left side of the page since the elements inside of the list items are all floated.
Finally, after all of that, your submenu s have a 40px left padding by default. You have to get rid of that for the sub-items to line up.
Check this out:
.wrapper{
width: 1000px;
background-color: rgb(255,255,255);
margin: 0 auto;
}
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
padding: 50px 0 47px 0;
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation > li {
position: relative;
width: 125px;
float:left;
margin: 0;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
height: 50px;
left: 0;
z-index: 1000;
padding: 0;
display: none;
}
ul.site-navigation ul li {
float: none;
line-height: 50px;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 20px;
}
ul.site-navigation li:hover ul {
display: block;
position: absolute;
width: 125px;
top: 100%;
left: 0;
}
http://jsfiddle.net/A5jtC/74/
UPDATE: I can't comment on others' posts yet, but JRulle's solution will push all of the content under your menu down when you hover over it and a submenu is displayed. In order to prevent that, you HAVE to use the relative/absolute positioning above so that your submenus don't take up page space when they are displayed.
You have some issues in your styles: Try these: JSFiddle
.wrapper{
background-color: rgb(255,255,255);
width: 100%;
overflow: hidden;
}
ul.site-navigation {
list-style: none;
}
ul.site-navigation:after {
clear: both;
}
ul.site-navigation li {
display: block;
float: left;
}
ul.site-navigation li a{
font-family: 'Arvo', serif, Georgia;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation li a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
ul.site-navigation li ul {
list-style: none;
display: none;
z-index: 1000;
padding: 0;
margin: 0;
}
ul.site-navigation ul li {
line-height: 50px;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 20px;
}
ul.site-navigation li:hover ul {
display: block;
}
For some reason, my drop down menu is being pushed to the right. It's supposed to open up directly below the link someone is hovering over, but it opens about 30px to the right and I can't figure out why. You can see the issue in action when you scroll over "Work" on my website: http://www.noellesnotes.com
My code:
CSS
ul.site-navigation {
text-align: center;
list-style: none;
}
ul.site-navigation li a{
padding: 50px 0 47px 0;
font-family: 'Arvo', serif, Georgia;
width: 125px;
float: left;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
border-bottom: 3px solid transparent;
}
ul.site-navigation > li {
position: relative;
width: 125px;
float:left;
margin: 0;
}
ul.site-navigation a:hover{
font-weight: bold;
border-bottom: 3px solid rgb(4,141,195);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
padding: 97px 0 0 0;
}
ul.site-navigation ul {
list-style: none;
height: 50px;
left: 0;
z-index: 1000;
padding: 0;
display: none;
}
ul.site-navigation ul li {
float: none;
}
ul.site-navigation li:hover ul {
display: block;
position: absolute;
top: 100%;
left: 0;
}
ul.site-navigation ul li a {
font-weight: regular;
font-size: 16px;
text-shadow: none;
padding: 5px 10px;
width: auto;
height: auto;
text-transform: uppercase;
border: 2px solid #FFF;
color: #FFF;
margin: 5px 10px 0 0;
}
ul.site-navigation ul li a:hover {
font-weight: regular;
font-size: 16px;
text-shadow: none;
padding: 5px 10px;
width: auto;
height: auto;
text-transform: uppercase;
border: 2px solid #FFF;
color: #FFF;
}
.site-title a {
color: rgb(185,40,141);
font-family: 'Arvo', serif;
text-transform: uppercase;
font-size: 63px;
background-color: rgba(255,255,255,1);
text-align: center;
text-shadow: #FFF 1px 1px,#ccc 2px 2px;
width: 500px;
float: left;
padding-top: 13px;
font-weight: normal;
letter-spacing: normal;
}
.site-branding {
display: table;
width: 100%;
height: 400px;
font-family: 'Lato', verdana, san-serif;
font-size: 6em;
text-shadow:1px -1px rgba(242,141,89,0.2);
text-align: center;
text-transform: uppercase;
color: rgb(255,255,255);
background-image: url('http://www.noellesnotes.com/wp-content/themes/portfolio/images/lights.jpg');
background-attachment:fixed;
}
HTML:
<ul class="site-navigation">
<li>About</li>
<li>Work
<ul class="submenu">
<li>Seventeen.com</li>
<li>One Direction Connection</li>
</ul>
</li>
</ul>
You have a left margin on all uls that are direct children of lis. (li > ul {margin-left:1.5em})
Add Something like this to your css to override that for your menu:
ul.site-navigation > li > ul {
margin-left:-2.75em
}
I think its natural because li tag has ul tag
You can use margin-left:-2px to fix this
I'm trying to let my menu stick to the bottom of my header. I've already tried getting it down, with deleting the float's, adding some, playing with padding/margin (this isn't an option seems to me?
<div id="header">
<div id="logo">
<h1>blah</h1>
<h3>Blah</h3>
</div>
<div id="menu">
<ul>
<li>qsdfqsdfqsdf</li>
<li>qsdfqdsfqsdf!</li>
<li>qdsf</li>
<li>qdsf</li>
</ul>
</div>
</div>
CSS:
/** HEADER */
#header {
height: 125px!important;
background: #000;
position: fixed;
top: 0;
width: 100%;
}
/* Logo */
#logo
{
float: left;
width: 250px;
padding: 20px 0px 0px 50px;
text-transform: uppercase;
}
#logo h3{
color: #fff;
margin-left: 1em;
font-size: 1em;
}
#logo h1
{
padding: 5px 10px 0px 0px;
}
#logo h1 span, #logo h3 span{
color: #000;
}
#logo h1 a
{
text-decoration: none;
font-size: 1.5em;
font-weight: 300;
color: #FFFFFF;
}
#logo p
{
display: block;
margin-top: -10px;
padding: 0px 0px 0px 0px;
letter-spacing: 1px;
font-size: 1.2em;
color: #FFFFFF;
}
#logo p a
{
color: #FFFFFF;
}
/* Menu */
#menu{
float: right;
width: 600px;
margin: 2em 2em 0 0;
}
#menu ul{
float: right;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
position: relative;
display: inline-table;
}
#menu li
{
float: left;
}
#menu a
{
display: block;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 300;
color: #FFFFFF;
padding: 1em;
text-decoration: none;
}
#menu a:hover{
color: #000;
text-decoration: none;
background: #fff;
}
#menu ul li {
float: left;
}
#menu ul li:hover {
}
Here an example:
http://jsfiddle.net/2wmSt/
Almost there mate, just position the menu absolute to the bottom of the header.
#menu{
position:absolute;
bottom:0;
right:0;
}
jsfiddle example