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:

Comments

  1. TrEmoR says

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

    • says

      Post me a link to the site and I will check whether the menu is hiding somewhere. Which browser are you using and which theme is it?

    • says

       Completely new method. Pure CSS, no scripts. To answer your question, though, the white box will have been caused by missing styling attributes. The method is (so far) flawless.

  2. says

    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.

  3. Allen Wilterdink says

    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!

    • says

      Check again in a different device using a different OS. Setting a defined width only works in the devices that render pixels, percentages, ems or whatever the unit in the same way. That’s the reason I developed the method shown above.

      If the above method didn’t work for you then your theme probably uses different class and ID names for the navbar elements. Use the Web Developer plugin in Firefox to establish what they might be then make the necessary changes to the CSS shown in the post above.

      Allen, thank you for sharing your experience. I will take a look at your site’s CSS if you would like me to.

  4. Elaine Griffin says

    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.

    • says

       I’m looking at the site  now. The menu is aligned left. If you center it for me I will be better able to make the width adjustment. What width do you need it to be?

  5. deebeedee says

    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.

  6. Michelle Gustafson says

    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.

    • says

      Hi Michelle.  Love what you’ve done with the theme. Looks great. For the menu, this menu seems to be coded differently from the regular Genesis menu. You might need to edit it to add an additional wrapper. As a quick fix (kind of fix), you can simply set a width for #nav .wrapper. Something like:

      #nav .wrap {
      width: 90%;
      }

      I’m not saying it will work in all devices but it should approximate a central appearance in most devices.

  7. Michelle Gustafson says

    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!

    • says

      You’re welcome, Michelle. I apologize for not replying sooner, I’m on vacation. From time-to-time I get clients who require artwork for their sites. If you do graphic design work then please send me a message at leehodson – a.t – vizred.com to let me know more of what you do. My business site is http://vizred.com. Thanks Michelle :)

    • Michelle Gustafson says

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

  8. says

    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.

    • says

      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.

    • says

      Thank you, Rob. This is very helpful.

      I know the method I’ve written is referred to in the StudioPress forums. I’d like to see menu justification/float made an integral part of Genesis. Maybe one day….

  9. Chaz says

    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.

  10. Chaz says

    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.

    • says

      Hi Chaz, I’m very sorry for my late reply. I’m still in Miami and haven’t been checking comments so much. Will be back to normal in a few weeks.

      I hope you’ve already solved this but if not send me an email at leehodson (at) vizred.com and I’ll fix it for free as way of apology for my late reply. I suspect you’ve missed part of the code or not properly installed the code. You’ll need to edit it in the site’s database to fix it now or you can quickly fix the site by disabling the theme via changing ‘genesis’ to ‘xgenesis’ in wp-content/themes/genesis.

      Please let me know whether this is already fixed or not.

  11. Kyle P says

    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!

    • says

      I’m sorry for my delayed response. Have been a little preoccupied with work. It appears you resolved the issue you were having. I’m glad you fixed it.

  12. Sitescape says

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

  13. van@knowmad says

    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.

  14. Andrew says

    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?

  15. Lauryn says

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

    • says

      You seem to have removed the centering so I can’t see the effect to help you with it. If I were helping I’d look at the CSS for the menu and check whether the sub menu li/ul selectors have display:absolute set.

    • Lauryn says

      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.

    • says

      I know why it doesn’t work. Your menu drops onto 2 lines. It is actually centered except for that.

      The fix:

      1) Make sure the CSS shown in the above guide is put at the bottom of your site’s CSS file (style.css)

      2) Add this to the bottom of the site’s CSS:
      #nav .menu a {font-size: 14px;padding:5px;margin:5px;}

      Play with the font-size, padding and margin to get the menu looking as you need it too.

      I am sorry for replying late. I’ve been busy with clients.

      Have fun, Lauryn, and please come back if you need more help.

  16. says

    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.

    • says

      Good tip. You will need to use media queries to make the menu stack (or not) when viewed in small screen devices. Will update the guide to show how this is done.

  17. Dave says

    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

    • says

      Thanks Dave. I’m sure it will. I keep meaning to update the post to add media queries but there are just not enough hours in the day. I will get around to it.

  18. Roxanne Brown says

    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.

    • says

      You’re welcome. When I first tried to center the menu it took me several goes using different methods to get it right. I’m glad you’ve found this useful :)

  19. Erik says

    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 says

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

    • says

      Hi Erik, I’m sorry for this delayed response. It seams the method doesn’t work for a few themes. I will be out of town for the next 2 days. Will take a look on Monday (today being Saturday).

    • says

      Hi Jeremy, try this:


      /* Center Primary Nav Bar */

      #nav {
      text-align:center;
      }

      #nav .wrap {
      padding:0;
      }

      #nav .wrap ul {
      display:table;
      float:none;
      text-align:center;
      }

      #nav ul {
      display:table-row;
      padding:0;
      width:55%!important; /* Adjust according to need */
      margin-left: auto;
      margin-right: auto;
      }

      #nav ul li li {
      text-align:left!important;
      float:none!important;
      }

      You might need to play with the width setting for #nav ul.

    • says

      Some Genesis themes use different classes and IDs for the menu elements. The code needs to be adjusted to match those cases. I’m glad the ‘Jeremy Solution’ worked. Thanks for writing back, Alex.

  20. says

    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 says

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

  21. says

    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.

    • says

      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.

    • says

      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.

    • says

      Hi Melanie, there’s no need to delete anything. Either place the code into the theme settings panel at Genesis > Theme Settings > Header and Footer Scripts (wp_head() section) or put the code at the bottom of the child theme’s style.css file.

      If adding the code into style.css, remove the lines

      that are shown above. If adding the code into the Genesis theme settings, make sure to sandwich the code between

      (as it already is written in the above examples). Only one of the code snippets shown above will be needed by your theme. Choose the one that works best.

      I’ve edited the post based on your prompting. Thank you Melanie.

      Let me know if you need help.

  22. says

    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/

    • says

      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.

  23. says

    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!

  24. kentfackenthall525842440 says

    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

    • says

      Your menu uses a different set of classes. This will work:

  25. lisa says

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

Leave a Reply