Center menus in Genesis

By Dave Kuhar | November 6, 2012 |

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 journalxtra.com)

Posted in Genesis, Snippets, WordPress

16 Comments

  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 .genesis-nav-menu.menu-primary to #nav, so : #nav { background: url(http://www.mospensstudio.com/blog/wordpress/wp-content/themes/MospensStudio/images/hand-drawn-line-illustration-3.jpg) 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

    Hi!

    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?