• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Center Nav Menu in Genesis

There’s no CSS code which works in every theme to center align your nav menu.

You’ll need to use a tool like Firebug or Google Chromes Inspector to find the correct classes.

Tested on the Genesis Sample child theme, this code can be used to center your primary and/or secondary navigation menus.

Center Primary Menu

.nav-primary {
    text-align: center;
}

Center Secondary Menu

.nav-secondary {
    text-align: center;
}

Clearly, this CSS will not work on every Genesis child theme or non Genesis themes.

I’ll be adding more code which works with different themes in the near future.

Related Tutorials

  • Center Custom Menu In Site Header of Genesis Sample Theme

Reader Interactions

Comments

  1. Garratt says

    October 22, 2014 at 2:14 am

    Thanks brad, your website is giving 404 errors when viewing archive pages of older posts under /web-design/. thanks for the resources.

    On wpsites/web-design/page/2/ page/3 page/4 etcetera

    Log in to Reply
  2. Dishon says

    August 12, 2014 at 12:04 am

    Hi Brad,

    Thanks for the tutorial. I used both of these codes to center my primary and secondary menus. However, the secondary menu is not centered when my site is viewed in Internet Explorer. I am using the Magazine Pro Theme. How can I fix this?

    Log in to Reply
    • Brad Dalton says

      August 12, 2014 at 4:04 am

      Worked perfectly for me when testing on all major browsers however older versions of I.E are always a problem.

      Link to your site please and i’ll take a look.

      Log in to Reply
      • Dishon says

        August 12, 2014 at 1:04 pm

        Here is the code:

        I’ve had a few people test my site on their computers and they use Internet Explorer. They all tell me that my menu is not centered.

        Thank you for your help!

        Log in to Reply
        • Brad Dalton says

          August 12, 2014 at 1:12 pm

          Please paste the code on Github and link to it from here. Your code does not display.

          Log in to Reply
        • Brad Dalton says

          August 12, 2014 at 4:25 pm

          Both menus render perfectly in I.E 9, 10 and 11

          Even the official Microsoft website doesn’t render correctly in I.E 8 and most sites don’t.

          Who would use I.E 8 or older?

          Log in to Reply
        • Brad Dalton says

          August 12, 2014 at 4:29 pm

          Why are your friends using a really old version of I.E?

          Log in to Reply
          • Dishon says

            August 12, 2014 at 5:58 pm

            LOL!! Brad, I have no idea why they are using old such old versions of I.E. I thought it was something wrong with my code. Maybe I need to convince them to update. Thanks for your help!

          • Brad Dalton says

            August 12, 2014 at 6:26 pm

            No one uses a version of I.E that’s more than 4 versions old when upgrades are free and I.E is one of the last browsers you would choose anyway so the only people who won’t see your secondary nav aligned center live on a remote island which doesn’t have the internet or they simply haven’t been able to work out how to click a button to update their browser.

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags