Centering Navigation Bar in Purchased/Customized Theme- normal fixes don't work?
-
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
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!
- The topic ‘Centering Navigation Bar in Purchased/Customized Theme- normal fixes don't work?’ is closed to new replies.