Align Main Menu Center on Top Menu Header Style

This is a Developer Level doc.

If you're unfamiliar with CSS and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.

This CSS snippet will center align the Main Menu for the Top Menu header style:

/* Align main menu on Top menu header style */
#site-header.top-header .header-top .right {
    display: none;
}
div#site-header-inner {
    display: flex;
    display: -webkit-flex;
}
#site-header.top-header .header-top .left {
    margin: 0 auto;
}

All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.

Align Main Menu Center on Top Menu Header Style

Related Articles