...

View Full Version : Centering Navigation Bar- normal fixes don't work?



mapkoza
01-15-2013, 09:39 PM
Hi All!

Sorry to join and immediately post a question-- it's been a few years since I've been up-to-date with my HTML and CSS, so now I'm having some trouble getting my navigation menu to align center. If I adjust the margins to auto, it centers the menu buttons, but bumps the menu background all out of whack.



#mainmenu-container {
height:71px;
width:1000px;
padding:0 94px;
margin:0 -79px;
background:url(images/menu.png) left top no-repeat;
position:absolute;
top:0;
z-index: 999;
}
#mainmenu {
width:800;
margin:0 auto;
list-style:none;
}
#mainmenu li a {
text-align:center;
color:#fff;
display:block;
text-decoration:none;
font-family:'Oswald';
padding:18px 30px;
}
#mainmenu li {
padding-left:7px;
position:relative;
}
#mainmenu li a:hover{
background:#91c000;
}
#header li ul {
top:38px;
}
#header #mainmenu li ul {
top:52px;
}
#header li ul .inner {
background:#91c000;
padding:0;
}
#header ul.children li, #header .sub-menu li {
padding:0 !important;
margin:0 !important;
height:25px;
line-height:25px;
}
#header ul.children li a, .sub-menu li a {
color:#fff !important;
padding:0 !important;
background:none;
height:25px;
line-height:25px;
}
#header ul.children li a:hover, .sub-menu li a:hover {
background:#a3cd23 !important;
color:#fff !important;
}
#header .sub-menu .sub-menu {
top:0 !important;
}


My site's live at mapkoza.com (http://www.mapkoza.com)

I'm able to get the menu background image to move, or I can shove the margins in really tiny and force the menu on to two lines, but I can't get the menu content centered on the menu background.

Thank you in advance for the help!

Excavator
01-16-2013, 12:05 AM
Hello mapkoza,
No worries about the question, that's what this forum is all about :thumbsup:

When you center 1000px wide .container (the last one that holds the ul menu), it's inside the parent .container and is also 1000px wide. Nothing to center if they are the same width.

I'd point out that there is not a lot of reason to bury that ul in 3 containing div elements. See Divitis here.

Look at centering that ul like this once (there are several other methods if this doesn't suit you)



ul {
list-style: none outside none;
margin: 0;
padding: 0;
text-align: center;
}
#mainmenu li, #secondarymenu li {
display: inline-block;
/*float: left;*/
position: relative;
}
Based on this example (http://nopeople.com/CSS%20tips/menu_centered_dropdown/index.html).

mapkoza
01-16-2013, 01:10 AM
Thank you! I purchased the theme with the intent to customize, so the core coding was not my doing. The fact that the divs are nested is what's confusing me so much! =)

Which ul should I be editing? Looking at my code, I can't find just a basic ul line; they all have additional modifiers.

EDIT: Whoops! Was looking in the wrong style sheet. My bad. Let me try this out and I'll let you know how it works. Thanks again!

mapkoza
01-16-2013, 05:10 AM
Okay. No one's looking at the site right now, since I haven't announced it, so I don't have a problem leaving my ridiculous result live.



#header-block {
position:relative;
padding-top:38px;
}
#mainmenu-container {
height:71px;
width:1000px;
padding:0 94px;
margin:0 -79px;
background:url(images/menu.png) left top no-repeat;
position:absolute;
top:0;
z-index: 999;
}
#mainmenu li a {
text-align:center;
color:#fff;
display:block;
text-decoration:none;
font-family:'Oswald';
padding:18px 30px;
}

#mainmenu li {
width:800px;
margin:0 auto;
list-style:none;
padding-left:7px;
display: inline-block;
/*float: left;*/
position: relative;
}
#mainmenu li a:hover{
background:#91c000;


Thought with your advice I'd figured out how to fix it... Guess not. =/ At least it's humorous right now. Any other suggestions? Or suggestions on how I can better un-nest my divs?



<div id='header-block'>
<div id='mainmenu-container'>

<div id='mainmenu' align='center'>
<?php $nav_menu_params=array(
'depth'=>0,
'theme_location'=>'main-menu',
'menu_class'=>'menus menu-primary',
'fallback_cb'=>'block_main_menu'
);
wp_nav_menu($nav_menu_params); ?>
</div>
</div>

I don't really get the point of them being nested that deeply?

Thank you so much for your help!

Excavator
01-16-2013, 09:36 AM
Thought with your advice I'd figured out how to fix it... Guess not. =/ At least it's humorous right now. Any other suggestions?

The snippet of CSS you posted shows you changed the li but I don't see that you changed the styling for the ul.
The online version is not updated to your most current version I think.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum