How can I get this nav bar to center??

[tommls]

I’ve been working with code from http://designfromwithin.com/blog/1110/just-a-nice-wayfinder-dropdown/ — as follows.

Working example at http://visualwave.com/demo/

I can NOT get it to center!! HOW do I get it to center in the browser window??

I have tried wrapping the nav in its own additional div with text-align:center and margin:0 auto but these don’t center it. Removing the float or setting float to none does not help either…

I know some people may say I need to assign a width for margin:0 auto to work, I tried that and it does not seem to work…

I usually will not know exactly how wide the nav bar will be at any given time because it’s to go into a page with a fluid/responsive layout…

Thank you, Tom

HTML CODE

Home









About









Gallery









Basic page









Sub page 1









Sub page 2











Sub-sub page 1









Sub-sub page 2 with a very long title

















Sub page 3















Contact

CSS CODE

header nav#main_nav ul {
margin:0;
padding:0;
z-index: 10000;
float: right;
}
header nav#main_nav ul li {
float:left;
position:relative;
font-size:10px;
list-style:none;
margin:0;
min-width:70px;
padding:0px 10px 0px 10px;
text-align:center;
text-transform:uppercase;
border-right:1px solid #ccc;
background:#222;
line-height:30px;
}
header nav#main_nav ul li:first-child {
border-left:1px solid #ccc;
}
header nav#main_nav ul li a {
color:rgba(255,255,255,0.6);
text-decoration:none;
display:block;
}
header nav#main_nav ul li.active {
background: #00A6FC;
}
header nav#main_nav ul li.active a {
color: #ffffff;
}
header nav#main_nav ul li a:hover {
color:#fff;
}
header nav#main_nav ul li:hover > a {
color:#fff;
}
header nav#main_nav ul li span {
background:url(arrow.png) center no-repeat;
height:10px;
position:absolute;
text-indent:-9999px;
top:10px;
right:5px;
width:10px;
}
header nav#main_nav ul li span.arrow {
background-position:0 2px;
}
header nav#main_nav ul li span.arrow-right {
background-position:-10px 2px;
}
header nav#main_nav ul li ul.sublist {
float:left;
list-style:none;
margin:0;
padding:0;
position:absolute;
left:0px;
top:31px;
background:#222;
width:90px;
opacity:0;
visibility:hidden;
-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
header nav#main_nav ul li ul.sublist li {
border:none;
border-bottom:1px solid #ccc;
clear:both;
margin-top:-15px;
padding:0;
width:90px;
-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

header nav#main_nav ul li ul.sublist li a {
color:rgba(255,255,255,0);
}
header nav#main_nav ul li:hover ul.sublist {
opacity:1;
visibility:visible;
}
header nav#main_nav ul li:hover ul.sublist li {
margin-top:0;
opacity:1;
}
header nav#main_nav ul li:hover ul.sublist li a {
color:rgba(255,255,255,0.6);
-moz-transition:color 0.1s ease-out;
-webkit-transition:color 0.1s ease-out;
-o-transition:color 0.1s ease-out;
transition:color 0.1s ease-out;
}
header nav#main_nav ul li:hover ul.sublist li a:hover {
color:rgba(255,255,255,1);
-moz-transition:color 0.3s ease-out;
-webkit-transition:color 0.3s ease-out;
-o-transition:color 0.3s ease-out;
transition:color 0.3s ease-out;
}
header nav#main_nav ul li:hover ul.sublist li:hover > a {
color:#fff;
}
/* SUB SUB LIST */
header nav#main_nav ul li ul.sublist li ul.sublist {
float:left;
list-style:none;
margin:0;
padding:0;
position:absolute;
left:61px;
top:0px;
background:#222;
width:90px;
opacity:0;
visibility:hidden;
-moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}
header nav#main_nav ul li ul.sublist li ul.sublist li{
border:none;
border-bottom:1px solid #ccc;
clear:both;
margin:0;
padding:0;
width:90px;
opacity:1;
}
header nav#main_nav ul li ul.sublist li:hover ul.sublist {
opacity:1;
left:91px;
visibility:visible;
}

[Billy]

1Your <ul> inside the <nav> has a “float: right;”

[tommls]

I know…that is the original code.

I already stated that removing or changing the float has no effect — it floats left by default if not right — and I already stated that enclosing the whole nav inside its own div and trying to center that had no effect — I’m trying to figure out the proper combination of float or no float and a centering wrapper div…and not getting very far…I’ll keep experimenting but I thought someone here might notice something I don’t besides the obvious…

Thank you, Tom

[Billy]

did you try giving the ul

ul {

display: block;

float: none;

margin: 0 auto;

}

[tommls]

I found this article:
http://matthewjamestaylor.com/blog/centered-dropdown-menus
which works in his example and may work for me…
Thank you, Tom

[tommls]

I got this sussed with the first article I mentioned.
Changing the first ul to this did most of what I needed

header nav#main_nav ul {

margin:0;

padding:0;

z-index: 10000;

float:right;

clear:left;

position:relative;

right:50%;

text-align:center;

}

and several other things…the first ul li was changed to left 50% and display:block; ul.sublist had float:left removed, same for sub-sublist; sublist.li had left:0 added; sublisl li elements increased to 100px width…

Anyone who is interested in knowing more can ping me etc.

Now to work on changing the styles and testing some more etc.

Thank you, Tom

[Slink2]

Hello everyone,

I have a similar problem that I cannot seem to solve with the advice above. i’ve created a fixed, 100% width nav bar that spans the top of my page, the only problem is I can’t get the drop down menu headings to stay centered as the page is re sized, or actually at all… they’re floated left at the moment.

here’s the full screen result
> http://jsfiddle.net/LinksTune/qkrxx/embedded/result/ and the code
> http://jsfiddle.net/LinksTune/qkrxx/

everything I have tried so far has been breaking the drop-down menus attachments to the menu headings.

Thanks for the help – Link

[Author]

Posts