Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

How do I center the main Menu navigation? 
 
TChamber
Jr. Member
 
Total Posts:  21
Joined:  2008-09-05
 

Can someone help by posting an example of the default “menu.css”, customized so that it is centered (rather than floated left)?

I’ve tried customizing the Menu.css as mentioned in this thread: http://www.magentocommerce.com/boards/viewthread/2696/

However, nothing has worked solidly.  I can tweak it to center the menu, but all menu items are listed vertically, not horizontally!  I can’t seem to get the right combination of CSS to make this happen - but it’s not through a lack of trying.

Any assistance would be really appreciated, thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Voot
Sr. Member
 
Total Posts:  261
Joined:  2008-03-20
Long Beach, CA
 

I’m not sure how to achieve this, but a nice work around would be to edit the margin to fix position the navigation.

find:

#nav { padding:0 20px; font-size:1.1em; z-index:999; } and add “margin-left:-100px;”. Play around with this number, if you put -200px for instance, the nav will move farther right. Remember, this is not centering the nav but positioning the nav to a specific spot on the site.

 
Magento Community Magento Community
Magento Community
Magento Community
 
TChamber
Jr. Member
 
Total Posts:  21
Joined:  2008-09-05
 

Thanks Vutha, but that’s not an ideal solution, as any changes to font sizes will result in the menu being pushed further out.  It really just needs to be centered properly.  Has anyone managed to get this working?

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Hi TChamber, there is no perfect solution for this but it doesn’t mean you can’t get it center

It will required you to change the wrapper to em unit, and this may result further adjustment for other elements.
With the zoom feature IE7 and Opera have, the pixel unit in Wrapper will still keeping the menu center, but not Safari and FF.

Here is the css code, the trick is using % for width, margins and padding.
/* test centering menu */
#w1 {width: 900px;margin: 25px auto;}

#w2 {max-width: 56em;min-width: 780px;margin: 25px auto;}

.menu {margin: 0 auto;overflow: hidden;background: #588;width: 100%;}
.menu li.first a {margin-left: 11%;border-left: 1px solid #fff;}
.menu li {display: inline;text-align: center;}
.menu li a {float: left;padding:1% 5%;color: #fff;border-right: 1px solid #fff;}
.menu li a:hover {background: #369;}

 
Magento Community Magento Community
Magento Community
Magento Community
 
TChamber
Jr. Member
 
Total Posts:  21
Joined:  2008-09-05
 
chinesedream - 13 September 2008 04:49 PM

Hi TChamber, there is no perfect solution for this but it doesn’t mean you can’t get it center.

That was really helpful, thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
doctorlogos
Sr. Member
 
Avatar
Total Posts:  178
Joined:  2008-05-06
 

Did you find a “perfect solution” now?

Changing wrapper to ems is not very confortable for the theme.

I would like to get one cross browser!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Erik v/d Ven
Jr. Member
 
Total Posts:  5
Joined:  2010-06-28
 

Ok, this topic is old, very old. But a good solution is still not posted, so:

As you can see below, I changed the float:left to display:inline-block;.

#nav li { display:inline-block; }

Now the code below works fine:

#nav { padding:5px 0; margin:10px 0; font-size:13px; text-align: center; }

So just change the float of all li’s in display:inline-block and add text-align:center to the #nav div.

 
Magento Community Magento Community
Magento Community
Magento Community
 
joakimc
Jr. Member
 
Total Posts:  22
Joined:  2011-03-01
 
Erik v/d Ven - 22 July 2010 01:34 AM

Ok, this topic is old, very old. But a good solution is still not posted, so:

As you can see below, I changed the float:left to display:inline-block;.

#nav li { display:inline-block; }

Now the code below works fine:
#nav { padding:5px 0; margin:10px 0; font-size:13px; text-align: center; }

So just change the float of all li’s in display:inline-block and add text-align:center to the #nav div.

Great solution, thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
CaptCornbread
Jr. Member
 
Total Posts:  12
Joined:  2012-01-11
 

I actually accomplished this in my site by changing my code in #nav in skin.css as follows:

#nav {
color: #000080;
/*padding: 0px 0px 0px 30px;*/
padding: 0% 0% 0% 19%;
width: 920px;
height: 28px;
}

Just changed the padding setting from px to % and bumped the left param to 19%.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top