WordPress Tip: Centering the Main Menu in the Twentyten Theme

twentyten

Hello WordPress users! All of y’all know about the stunning new default theme “twentyten” that comes with the new WordPress 3.0 release. I’ve been working with that theme a lot through child themeing.

If you ever run into a problem/question with customizing your theme or CSS, you can always search the WordPress Codex or Forums – most likely there will have been someone else who has encountered the same or similar problem. Don’t be afraid to chime in whenever you think you can help out. Most likely there are people on the forums that know less than you do that you can help out.

Centering the Main Menu in the Twentyten Theme:

By default, the twentyten menu normally floats left. if you want a centered menu, you can change your css style sheet.


/* =Menu
-------------------------------------------------------------- */

#access {
 background: #000;
 margin: 0 auto;
 width: 940px;
 display:block;
 float:left;
}

The above is a segment from the default css in twentyten. You need to take out the “float: left;” and add in “position:absolute; text-align:center;” then add a new line of “#access ul {display:inline-block;}” This will change it to the following:


/* =Menu
 -------------------------------------------------------------- */

 #access {
 background: #000;
 margin: 0 auto;
 width: 940px;
 display:block;
 position:absolute;
 text-align:center;
 }

#access ul{display:inline-block;}

Hope you enjoyed this tip. And remember always: WordPress is for lovers.
-sara

Edit: forgot to add: Make sure you include an IE fix!

put this in its own little ie.css file and conditional comment it into your header. :)

#access ul{
    display:inline;
    zoom:1;
}
Comments have been disabled for this post.
Sort: Newest | Oldest

Just what I was looking for (for a different theme but still got it to work). Thanks!!

"put this in its own little ie.css" Sara, can you give some details how to do?

hey- how do i get the now-centered nav to be below the header image?

Thanks so much!! I coulnt figure out the IE fix either but its works on IE8. Thanks for taking the time to post this!

Hey Sara, thank you so much for this fix, it works great. I do share Sugata's problem though. I tried adding the IE conditional and having it linking to another .css file but it doesn't seem to work. The conditional should go inside the "head" section of the header.php file correct? Thank you for your time.

I don't understand the line "put this in its own little ie.css file and conditional comment it into your header". What should I do to make it work on ie? Thank you!

Sugata - you can add this piece of code in your header.php file between the <head> and </head> tags to ensure that the menu is centered in IE7 (it should already be centered in IE8): <!--[if IE 7]> <style type="text/css"> #access ul{display:inline;zoom:1;} </style> <![endif]--> Thanks for providing this tip, Sara!

FYI, the code above is incorrect. You need two dashes in each instead of one:

Great info. Thank you for sharing in a clear and easy manner.

Thanks for this :) I'm teaching myself this Wordpress stuff for the next site I make and this is the clearest explanation of how to centre the menu Many thanks :)

it is so refreshing seeing a new default theme :-)