Search code examples
htmlwordpresscssstorefront

How do I Center the Storefront Menu?

To replicate my problem go to the storefront demo page here: https://demo.woothemes.com/storefront/ and delete the node <ul id="site-header-cart" class="site-header-cart menu"></ul> that contains the cart box (to the right of the menu) so that the main menu is by itself.

Here is where I am stuck, I can't figure out how to center the menu.

I have tried a lot of different combinations but I just can't understand what is going on with the WooCommerce/storefront css. It makes no sense to me.

Here is what is working for me...

.woocommerce-active .site-header .main-navigation {
    width: 100%;
}

#menu-primary-menu {
    display: table;
    margin: 0 auto;
}

But I have no idea why it only works with display: table. I tried using flexbox but no flexbox rules seem to work anywhere! It's so confusing to do something so simple.

Solution

  • You're overthinking their stylistic choices. You can try this instead:

    @media (min-width: 768px){
    .woocommerce-active .site-header .main-navigation {
        width: 100%;
        margin: 0;
        text-align: center;
    }
}

    It works by removing the limited width, and the margin that bumped the "cart" over a bit more. Now that it's full width, you can just center the text:

    Preview