***Cannot align the navigation bar to center ***

[letsgo_eric]

Hello, I am having problem to align the navigation bar to the center. I had numerous attempt to add code (e.g. text-align: center; vertical align: middle) to different css but it is still not working. its still float to the left at the moment. It can be viewed at http://www.obsexxion.comThe CSS code is as follow:

#HeaderLower {display: block;position: relative;z-index: 3;padding: 0 35px;font-size: 15px;font-family: 'Questrial', sans-serif;font-weight: bold;font-style: normal;text-transform: uppercase;min-height: 1px;text-align: center;}#HeaderLower .sf-sub-indicator {background: url(../../Outdoor/images/white/subDrop2.png) 0 0 no-repeat !important;width: 4px !important;height: 7px !important;top: 50% !important;margin-top: -4px !important;right: 5px !important;opacity: 1 !important;filter: alpha(opacity = 1) !important;display: none;}#HeaderLower .PageMenu, #HeaderLower .CategoryList {}#HeaderLower #Menu .First  {display: none;    }#HeaderLower h2 {display: none;}/* Horizontal Category List (Default & Flyout) */#SideCategoryList {padding: 0;margin: 0;}#HeaderLower ul {display: block;text-align: center;list-style-type: none;margin: 0;padding: 0;width: auto;}#HeaderLower li  {display: inline-block;float: left;padding: 0px 0px;line-height: 21px;height: 21px;position: relative;letter-spacing: 2px;width: auto;text-align: center} #HeaderLower li:first-child a {border-left: solid  0px;}#HeaderLower li a {display: block;padding: 0 10px 0 10px;text-align: center;}#HeaderLower li ul {display: none;position: absolute;top: 73px;left: 0;margin-left: 0px;z-index: 1;width: 220px;padding: 25px 0;}#HeaderLower li ul:before {content:"";display: block;width: 25px;height: 13px;position: absolute;top: -13px;left: 20px;margin-left: 0px;z-index: 1;}#HeaderLower li ul ul:before {display: none;}#HeaderLower li ul li {float: none;height: auto;padding: 0 20px;text-transform: capitalize;position: static;font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;font-size: 13px;letter-spacing: 0;}#HeaderLower li ul li a {border: solid 0px;display: block;padding: 8px 5px;}#HeaderLower li ul li a.hasSub {padding-right:     10px;}#HeaderLower li ul li a:hover {}#HeaderLower li ul li ul {top: 0;left: 220px;margin: 0;}

THANKS IN ADVANCE !!!!

 

Eric

Edited November 11, 2013 by letsgo_eric

[rootKID]

First of all i have to get something straight, is it the menu you mean?

 

I'm refering to the menu that has the items: HOME, SHOP, MULTIPACK, LOOKBOOK, SHIPPING & RETURNS

 

If that is the case, please comment

[letsgo_eric]

Hi RootKID, Yes It is the menu ....HOME, SHOP, MULTIPACK, LOOKBOOK, SHIPPING & RETURNS !! thanks

[dsonesuk]

#Menu  {position: relative; float: left; left: 50%;}#Menu > ul {position:relative; left: -50%;} 

position #menu 50% from left edge to total width of parent element, bringing #menu left edge dead centre, now you want to bring the total width of MENU 50% back to left, now float causes it to collapse to total menu width, now you force ul to return back to left of its parent width (width of menu) with left: -50%; and bingo you have a centred floated menu.

[rootKID]

Hmm, i was about to write a longer CSS method that might have helped, thanks for letting me "not" writing that ...

[letsgo_eric]

thanks guys ! it works !!!! i slightly change the code you given.... because when i added #Menu {position: relative; float: left; left: 50%;} ...both the menu and the slideshow float to the right and i don't know how to move it back to the center. So i only added float left 25% in the headerlower li and it works .... THANKS!!!!

 

#HeaderLower li {

display: inline-block;float: left;left: 25%;

 

 

One more question .... the bottom footer of my site (www.obsexxion.com) - (pages, categories, newsletter, connect with us) also floating to the left at the moment. I try to use the same method as the menu but it doesn't seem to be working. Any hints for that ? Thanks very much guys !!!! save my life