Center menus in Genesis


It drives me nuts that there’s no obvious, easy way to center the nav bar in Genesis (or, to be fair, in most WordPress themes/frameworks). Stumbled across this the other day and found it works really well.

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. It is possible to write it as, for example, #nav .wrap, #subnav .wrap {} etc… to minimize page sizes.

(Lifted from

stuff we dig

FYI: yes, the above are affiliate links, so we do make a small amount of money if you follow them over and buy what they're selling. Thank you for helping pay our hosting costs!

Dave Kuhar

Dave ran Transmit Studio, a media creation lab in San José. He's built more websites with WordPress than he can remember. He's reluctantly moved back to Ohio and now works for Stanford University (remotely). He likes hearing himself talk and writing about himself in third person.


  1. Scott on July 13, 2013 at 11:41 pm

    Massive thanks – worked a treat.

  2. Dave Kuhar on July 15, 2013 at 2:10 pm

    Glad we could help!

  3. Lisette on August 22, 2013 at 6:15 pm

    a MILLION THANKS! Been looking for this for MONTHS!

  4. Dave Kuhar on August 23, 2013 at 10:48 am

    We’re happy you stumbled across the answer here! If you have any trouble, check out the source article linked at the end of our post.

  5. George on September 22, 2013 at 5:19 pm

    AMAZING! Thank you so so much! I have been looking for this for weeks.

    Any idea how to center a logo as well?

  6. Dave Kuhar on September 24, 2013 at 1:42 pm

    George, that would depend on how your header is constructed. For instance, on this page we’d have to drop the menu out of the header, take float:left off the .header-image #title-area div, and set it to {margin: 0 auto}.

  7. Cristina Castro on September 27, 2013 at 6:16 am

    Thank you so much! It was so helpful! I still can’t believe it is necessary to copy so much code to do just that one thing, but it works!!!

  8. Dave Kuhar on September 27, 2013 at 1:24 pm

    Glad it works for you!

  9. Michelle on October 3, 2013 at 1:57 pm

    Thank you so much. Love this. … One quick question… My “hand-drawn” divider is now cut short to length of the navigation menu. Any ideas how to fix this? Thank you.

    • Joe Mendel on October 3, 2013 at 2:23 pm

      Michelle, you simply need to move your style from to #nav, so : #nav { background: url( 50% 100% repeat-x; }

      • Michelle on August 27, 2014 at 2:20 pm

        Thank you so much! 🙂

  10. Mel on December 13, 2013 at 4:50 pm

    Thanks! The divider line below the nav menu isn’t showing. Any ideas on how to make it reappear?

    • Joe Mendel on December 13, 2013 at 9:12 pm

      Sure. Assuming you want it to look like the divider line above the nav menu you would add #nav {
      border-bottom: 2px solid #1E1E1E;
      to style.css

      • Mel on January 3, 2014 at 11:13 am

        Thanks Joe! Worked like a charm.

  11. Bo on January 2, 2016 at 10:40 am


    Can I use this in the last update of Genesis Framework

    • Dave Kuhar on January 4, 2016 at 7:37 pm

      I believe so, yes. I haven’t had to use it in awhile, though. Have you tested it?

Leave a Comment