Center Menu Bars in Minimum

Community Forums Forums Design Tips and Tricks Center Menu Bars in Minimum

This topic is: resolved

Tagged: ,

This topic contains 5 replies, has 2 voices, and was last updated by  Tony @ AlphaBlossom 2 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #21743


    I’ve been trying most of the morning with no luck, to try and get my menus centered under my header. I have tried a few different things I found in the old forums but I can’t get anything to work.

    Any thoughts for me on what needs to be changed in the css to make it work?

    Thanks in advance!


    Tony @ AlphaBlossom


    For the top menu, in your child theme style.css, change your #header .widget-area to “float:none;” and add “margin: 0 auto;”

    Then change #header .menu to “float: none;”

    For the lower menu, add “text-align: center;” to .menu-primary, .menu-secondary, #header .menu (around line 304).

    Then for .menu-primary li, .menu-secondary li, #header .menu li change to “float: left;” and add “display: inline-block;” (around line 327).



    Thank you so much for all that help! I think I’m almost there but maybe missing a little something. The top menu worked perfectly while the lower one still appears to be aligned left.

    Do you see something I’ve missed?

    Thanks again!


    Tony @ AlphaBlossom

    Hi Brittany,

    It still looks like you have float: left around line 329 (.menu-primary li, .menu-secondary li, #header .menu li). It should be “float: none;”

    Also, your submenus are now centered as well (dropdowns). If you want them to be left-aligned, you can add:

    .sub-menu {
    text-align: left;

    and also add any padding you’d like.

    Hope that helps!



    annnnd your help did it, yet again. Thank so much!


    Tony @ AlphaBlossom

    You’re welcome, Brittany! Have a great day.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Center Menu Bars in Minimum’ is closed to new replies.