HowTo: Center WordPress Genesis Theme Horizontal Menus

Genesis by StudioPress is the most stylish, simplest to use and easiest to customize theme framework I have ever seen. But try to centre the horizontal navbars and you’re in for a lot of fun.

That is, at least, until now.

I spent months working out how to center Genesis menus. Different devices like mobile phones, desktops and tablets and different operating systems like Linux, Windows and MacOS have their own way of rendering padding, margin and font sizes. These layout differences made menu centering a hard pain monster to master.

I tried using Javascripts and PHP scripts to detect browsers, operating systems and devices so that different menu centering CSS could be served to different visitors. This worked… most of the time.

But I couldn’t take chances with the sites I build for my clients so I searched and researched and dug deeper into my brain until I found a final solution.

What I had partly forgotten is that it is easier to horizontally center content within table cells. What I had completely forgotten is that browsers can be told to treat divs as table cells. If that means nothing to you, don’t worry. Just follow the instructions below.

How to Center Genesis Menus

All the CSS shown below can be added to either your child theme’s CSS file (style.css) or to form field in the Genesis theme settings where it says Enter scripts or code you would like output to wp_head(). There is no need to delete anything from your existing style sheet unless told to do so below here (thanks for prompting me to add this line Melanie :).

When adding the below snippets to style.css, please remember to remove the <style> </style> tags.

There are two methods you can use to center the Genesis menu. If your theme is up to date and the child theme is recent, you can usually center the nav menu by adding this to your theme’s CSS:

If the above doesn’t work, remove it and use the following instead:

If you use a responsive design you will need to correct the menu display at your breakpoint with:

If you are concerned about compatibility with IE 7 and under, add this IE compatibility CSS into the wp_head() section under Genesis > Theme Settings > Header and Footer Scripts (this will not work in style.css):

Save the settings, clear your browser cache and/or WordPress cache then reload the page. The menu will now be centered in every device and every operating system.

After months of trying scripts, it turns out to be that simple!

A couple of notes

If you are using a subnav, change #nav to #subnav in the above CSS.

If you are using both the top menu and the bottom menu, use two versions of the CSS: one for #nav and one for #subnav.

Some themes use non standard IDs for the navbar divs. For such themes, #nav and #subnav will not work as CSS ID selectors. You will need to find the correct ID to use in theses cases. I will help where I can.

Thanks goes to pmob.co.uk for reminding me that CSS can be used to force web browsers to treat divs as table cells.

Update

Some Genesis menus are more awkward than others. Here is another code snippet you might try. This snippet centers the primary nav. Change #nav to #subnav to center the secondary navbar:

Update 2

I really do need to rewrite this page… If none of the above code samples work for you, try this one:

Win the battle. Social Warfare Dynamik Website Builder Author Pro

Leave a Reply

105 Comments on "HowTo: Center WordPress Genesis Theme Horizontal Menus"

Notify of
Sort by:   newest | oldest | most voted

Followed your directions for some reason after adding the last script I get a big white box and no menu. Any ideas?

I’m using safari or chrome. 

Great article man. Somehow it mostly worked but then it didn’t. lol I’ve been trying to get this effect done without padding and specific margins and your solution should have worked for me but for some reason it didn’t. Had to go back to padding by pixels. But I will revisit this after this project is out the door.

Thanks Lee! I’ll check it out. Thanks for the update.

Thank you so much! I’ve been struggling with this issue for a while and hadn’t found a satisfactory solution. Yours worked!

Thanks for the tip, it didn’t work but it lead me down the right path.   to center the menu items just add the following code to your stylesheet: 

 #nav li {
  float: none;
  list-style-type: none;
  width: 150px;
}

you may have to adjust the width but it will work I promise!

Thank you!!!!  Worked like a charm.

Thanks, this worked really well. I’m wondering, though, how to set the width. When I attempted to do this, it aligned it all left again.

Thanks Lee. The site is http://www.mylifesuchasitis.com.

I’ve been pulling my hair over this issue for weeks now. I was going for a CSS-only solution from the get-go but none of the obvious fixes worked. Thanks for your solution! I just modified your rules by removing “white-space:nowrap;” to suit my needs.

I’ve added the code, but my menus are still not centering http://174.132.156.194/~vitalia/

Any advice?  And thank you for the code, I’ve been struggling to find such a solution for months.

Thanks Lee for the assistance.  I’m using the Outreach theme so I’d suspect it is coded differently.  And thank you for the compliment.  I wish I could take credit for the design but sadly I cannot. :)  I do psd to genesis conversions for a couple of graphic designers.

Thanks again!

I’ll pass this information on to the actual graphic designer of the site, I’m just the code monkey. :)

BRILLIANT! Thanks so much!

Great! I find it works but when you re-size the browser window the menu doesn’t stack and become 2 or 3 lines deep to accommodate the links that can’t be viewed on the narrower widths.

having the same issue, would love to see a solution

Get rid of

white-space:nowrap; from your header CSS.
And then add !important to display: inline-block;

@media only screen and (max-width: 960px) {

.menu-primary li,
.menu-secondary li,
#header ul.menu li {
display: inline-block!important;
… }

}

It would be great if Studiopress find out about this because it took me ages to work out and it really should be easier.

I’d like to see that too :)

I can’t find where it says ” Enter scripts or code you would like output to wp_header():” in either the Genesis theme (which cautions to not tamper with) or the Agency child theme (which I’d rather edit). Thanks.

Uh oh — I found something similar to “enter scripts…” in the php section, and did that, but now that whole page and the entire site is one blank white screen. What do I do? Thanks.

Any reason adding position:fixed to #nav would throw it to the left?

Could really use some help! Did everything like you said, worked fine when I first stating my site and I only had 1 page on my nav bar to test it, but now that I am starting to get pages pages done and on the nav bar, for some reason, no matter how many items are on the nav bar, whether it is 3 or 20, the last link always displays on a second row??? There is plenty of room on that line and if I had a new page on the bar, the link that was last goes back up next to the others, and the new one is underneath them. I do not understand at all and I can not guess why at all!
http://www.mkpdesigns.net/atlanticglass/

Many thanks if you can take a second to look!

This was excellent and precisely what I needed in a pinch for a clients demo site. Thanks so much! I”ve got you bookmarked.

[email protected]

I did this before I came across your post, based on how the responsive style sheets center the menus on tablet/phones sizes:

/* center top two main menus */
.menu.menu-primary.superfish.sf-js-enabled,
.menu.menu-secondary.superfish.sf-js-enabled {
float: none;
text-align: center;
}

#nav .menu.menu-primary li.menu-item,
#nav .menu.menu-primary li.menu-item.current-menu-item,
#subnav .menu.menu-secondary li.menu-item,
#subnav .menu.menu-secondary li.menu-item.current-menu-item {
display: inline-block;
float: none;
}

Not tested yet in every browser, but works well when resize desktop windows down to small sizes.

Hi. The solution worked for me, but only for the first level of menu ites. The drop-dowm ,menu became horizontal (which could be still usable) but the third level is on top of the second.
The site is http://www.ztss.sk/ (3rd level menu is in the KTO SME – DOKUMENTY menu point.
Has anyone a solution for this problem?

Magazine Child theme

Superb! well done

You’re marvellous! I managed to solve my cousin’s website right away!

And it’s for my model cousin’s blog at suan-li.com she’s the Oriental lady croupier in the Skyfall Bond – casino scene.

So I tried this before, and thought I got it working on a child theme, but can not find the site I did it on. Now I am working on a responsive site using the Decor theme, and can not get this working.
http://www.mkpdesigns.net/carmonscurlupanddye/
Anybody have any ideas why? Thanks!

Thank you so much for this solution. It is working for top level menu items, but the drop down items are coming up to the right of the top item instead of underneath. I am working with the associate theme. Site is http://www.swanhomeandauto.com Not sure what I did.?

Apologies. My client was looking at the site and I didn’t want the menu acting wonky. I put it back if you can spare another moment.

Excellent stuff, thanks. I’m new to Genesis and this is going to save me a lot of tinkering time, and make my sites look that little bit better. Appreciate the help. I added a background-color in the #nav div to make it appear to stretch the width of the page.

I’ve been hassling with centering the menu for months for a client with no results till NOW. Works great. Best of all, clear instructions. Thank you!

Hi Lee,
This was very helpful, thanks! At first I was bummed, because even though the top row looked great, my dropdowns were all messed up. As I looked into it, this actually made sense, because the default styling of the dropdowns is drastically different from the top row.

So after some digging, I just found some code that would restore what the dropdown CSS was expecting for stuff below the top row:

#nav ul li ul li {
display: inline;
white-space: normal;
}

Hooray! Then I noticed that this did not look good at iPad portrait size and below, so I just used this line to cancel the top row “table” stuff at max-width of 1024, very similar to the strategy above:

#nav ul li {
display: inline;
white-space: normal;
}

My CSS, including the responsive stuff, is based on the Genesis Sample Child theme, which I have modified for my own tastes and preferences. Hope this helps someone.

Thanks! Dave

Thank you so much, I’m so glad I found this! I’ve been working on trying to center my menu for days and I could not figure it out.

Hi, Lee–

I tried adding the code but it isn’t working. I’m assuming that there shouldn’t be any problems with the new releases of WP or Genesis?

My site is: amadorvalleyhs.org

I’ve cleared my cache and am using multiple browsers. Just kinda stuck. I appreciate any advice you can give.

Thank you,

Erik

I noticed that in the Education Theme I am using for Genesis that #menu-secondary is used instead of #subnav. I replaced everything respectively but it still isn’t working….

Hi Lee,

trying to get this to work on http://blog.wtmresponsibletourism.com, but the subnav stays left. Any suggestions as to how to correct it hugely appreciated. Jeremy

Great tutorial! In your second version, though, you’re missing a semicolon in #nav, it should be

#nav {
text-align: center;
}

Noticed on sites I’ve updated lately Gen 2.0 that the code isn’t working. Any advise?

Actually the code you gave Jeremy above worked. Thanks

This is as close to getting my Nav Bar Centered as I’ve ever gotten, however it’s “wrapping” the buttons. Any idea how to get this to straighten out?

Jennifer I had the same problem and had to adjust the width using Jeremy’s solution.

Hi. Works great, thank you for sharing. I am using the Genesis Prose theme. Everything is the latest version. I still have a little bit of unused space at the side of my navigation bar (john-finucane.com). I would like the buttons to automatically expand to take up all the available space. Is there any way to do this? My apologies if this is a stupid question or wishful thinking. My knowledge of CSS (and generally) is rather limited.

John, you could add:

li, ol, ul {
margin: 0px 2px 0 0 !important;
}

to the Genesis> Custom Code> Custom CSS.
It will spread it out slightly, any more and it’ll wrap.

Hi. Thank you for the quick reply. The code worked well but left a slight gap between the first two buttons, I think I’ll simply use the first code snippit on it’s own. Thanks again.

Hello, I am a newbie and I’m not sure how to find the right CSS page. I’m running the Minimum Theme on 2 websites.

http://www.honestbody.com
http://www.mergecrete.com

Do I just copy and paste the above code to the bottom of the Stylesheet (Style.css)? Or do I need to delete certain code and add in your code?

Thank you,
Melanie

Good evening. I have tried all the code above to get my footer nav to center. Changed the ID to #footernav which is what was used in the css. But nothing works. If i change the float to none to try and center it it goes vertical. I was able to center the footercreds with no issues. Any ideas? its driving me crazy!

http://drydockthefilm.com/ddf/

This is now the top menu am trying to center.. I have the IDs the same #nav, but still wont center. i think it hates me.

this got resolved, thanks

Thank you, Lee!!

oh yes! thank you for this. it was starting to piss me off that i couldn’t get it centered xD you’re awesome!

Thank you for this! I love when I can google a question and actually get a post that answers it. The last bit of code worked for me with changing the percentages. Perfect!

Just wanted to chime in and say thank you so much for your help! A few tweaks and it worked like a charm! Thanks again-Scott

http://www.spolltest.com

thanks a lot, this works perfectly!

Lee,

I’ve tried all the of the above snippets in both my CSS and the Genesis Head section via the Admin and nothing has worked. I am using a newer theme (News Pro) and am wondering if that is the issue.

Any way you can check and tell me if it’s a theme issue or if I’m placing the code wrong so at least I’d know if I should keep trying?

My site is here http://kiersdev.com/bws/

Thanks,
-Kent

I’ve tried every one of these and I feel like i’m doing something wrong. No clue what is going on here. Any help would be appreciated.

http://www.greenkcroofs.com

In the “header/footer scripts” area to output to wp_head():
I’ve also tried to manually put it in the styles.css file.

Got it! I just added it in both places and it worked. Not sure how or why, but it is now. Thanks man!

Just tried your last solution on the genesis framework…worked like a charm! Thank you!

The last one worked! Thanks!

i’m still struggling with the secondary menu (subnav) of the responsive Ayoshop Childtheme.
I feel like i am doing something wrong here…

wooooopie!
i made it work. friggin ayoshop…..
i deleted everything of “secondary navigation” in the ayoshop style.css and replaced it with this:
it might not be the most elegant, or even correct way, but hey. it worked ;)

http://imgur.com/71oaCJb

/* Center Secondary Nav Bar Lisa */

.menu-secondary {
float: none;
text-align: center;
text-transform: uppercase;
}

.menu.menu-secondary > li {
float:none;
display:inline-block;
}
#subnav .wrap{
width: 1040px;
margin: 0 auto;
}
#subnav li a {
color: #888;
display: block;
line-height: 1em;
padding: 1.25em 1em;
margin: 0;
position: relative;
z-index: 0;
text-decoration: none;
text-transform: uppercase;
}
#subnav {
background-color: #fff;
}

Hi there! I know it has been a while since this was originally posted, but I could really use your help! I am “revamping” my blog, but am really a total novice when it comes to all this. I have attempted to use all of the above codes on my Genesis Prose theme, and, unfortunately, none of them have worked.

I have tried placing the code in my Genesis custom code, in the Prose style sheet, etc., and am not seeing any difference in my menu.

I would SO appreciate any help! http://foundandfreecottage.com

THANK YOU!!

Thank you, thank you, thank you! I have been going crazy trying to center the primary menu for the Mindstream theme. Your Update 1 has worked perfectly.

I’m going to write to StudioPress and suggest they provide a link to this page because I’m sure a ton of users struggle with this.

wpDiscuz

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!