Centering WordPress Menus using Bones

As you may know, I build my WordPress themes using the Bones starter theme by Eddie Mochado. Quite often I am given a theme with a design that includes a WordPress menu that is centered on the screen. I know this subject has been danced around several times, but the solution is very easy with a couple of CSS edits.

First you have to decide at which break point you want the menu to be centered. So this edit should be done in the appropriate file. (ie: _base.scss, _768up.scss)

Make the following changes:

.nav {
     text-align:center;

     li {
          display:inline;
          float:none;

         a {
            display:inline-block;
           }
        }
      }

That’s it! Enjoy.

Leave a Reply