Print this Post

Centering Menus in Graphene Theme

Header and Secondary menus in Graphene Theme are left aligned. You can align them centre using some CSS code.

Centering menus is quite easy. Just add this to Custom CSS or child-theme style.css

#header-menu {
    display: table !important;
    margin: 0 auto !important;

This aligns the header menu to centre of the header menu wrap.

Centred header menu

Centred header menu (Click for larger view)

If you want to centre the secondary menu, use the below CSS code.

#secondary-menu {
    display: table !important;
    margin: 0 auto !important;

Use the below Custom CSS code to centre both Header Menu and Secondary Menu.

#header-menu, #secondary-menu {
    display: table !important;
    margin: 0 auto !important;

It will give this appearance. (Experimented this on Ken’s blog)

Header and Secondary menu centre alignment

Of course, I’ve changed the #header-menu-wrap background colour to blue. Otherwise it will look like this,

Header and Secondary menu centre alignment 2

Thanks Ron for the input!

Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

Permanent link to this article: http://www.prasannasp.net/centering-menus-in-graphene-theme/


Skip to comment form

  1. Julie Dupuis

    Hey thanks! I just tried the first code for the primary menu & it looks way better!

    1. Prasanna SP

      Hi Julie Dupuis!
      Your site looks great! I like the typography in your blog.

  2. nicolas

    Thanks for the tips, this will help me soon for my next updates of my graphene them.

  3. Ashley

    Where is the header code added in the style sheet?

  4. Constantin

    Thank you a lot. Now i have a centered header menue and I like it. Greetings from Germany!


    hi Prasanna
    I appreciate all ur work & help.

    on FastestCashForHomes.com

    I have got the top MENU like I want it but want the 1 on the footer to match it exactly in Evey way
    centered & hover color, spacing,

    How do I do that I tried putting
    #header-menu, #secondary-menu {
    display: table !important;
    margin: 0 auto !important;

    in my child theme style.css

    Thanks in Advance
    John W. Odle

Leave a Reply

Your email address will not be published. Required fields are marked *

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.