WP SITES

Log in

Center Nav Menu in Genesis

—

by

Brad Dalton

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

Comments

9 responses to “Center Nav Menu in Genesis”

  1. Garratt Avatar
    Garratt

    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

  2. Dishon Avatar
    Dishon

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Dishon Avatar
        Dishon

        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!

        1. Brad Dalton Avatar
          Brad Dalton

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

        2. Brad Dalton Avatar
          Brad Dalton

          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?

        3. Brad Dalton Avatar
          Brad Dalton

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

          1. Dishon Avatar
            Dishon

            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!

          2. Brad Dalton Avatar
            Brad Dalton

            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

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.