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:

106
Leave a Reply

54 Comment threads
52 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
47 Comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
TrEmoR

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

TrEmoR

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!

Allen Wilterdink

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!

Jonas

Thank you!!!!  Worked like a charm.

Elaine Griffin

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.

Elaine Griffin

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

deebeedee

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.

Michelle Gustafson

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.

Michelle Gustafson

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!

Michelle Gustafson

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

Peggy Saas

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.

dan

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 :)

Chaz

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.

Chaz

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.

Heather

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

Kyle P

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… Read more »

Sitescape

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

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.

Andrew

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?

Andrew

Magazine Child theme

Dom

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.

Mike

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!

Lauryn

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.?

Lauryn

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!

Dave

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,… Read more »

Roxanne Brown

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.

Erik

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

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;
}

Alex

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

Alex Glassman

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?

Alex Glassman

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

philipallen

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!

smpoll

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!

kentfackenthall525842440

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

Nick

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

Nick Webb

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

Nick Webb

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

Tracy

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

Tina

The last one worked! Thanks!

lisa

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

lisa

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.

Thank you, Elizabeth!

I was skeptical that this would still work given how ripe the post is now. But it worked perfectly the first time around after pasting your Update #2 code into the wp_head() scripts box. We’re using the Enterprise Pro child theme.

Another step forward on the new site!

Thx a lot for the tutorial!

thank you!! The last option worked for me.

visitor

THANK YOU! I had been trying for two hours to just center the stupid menu line. Your last example (Update 2) did the trick in a flash.

Free to your inbox

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

You have Successfully Subscribed!