How To Center Align the Main Header Menu

Centering the main header menu is pretty simple and straightforward. However, if you use this custom CSS for any theme other than Responsive, then please make sure you test your website thoroughly for responsiveness – to make sure these changes have not impacted the responsiveness of the theme.

Here’s a guide that explains how to center the main header menu in WordPress using Center Menu CSS .

How to Center Menu in WordPress ?

Custom CSS Center Align Menu

Add the styles directly in your Child Theme style.css or Appearance > Theme Options > Custom CSS or via Customize->Additional CSS (as shown in the image above)

@media screen and (min-width: 981px) {
    .menu {
        text-align:center
    }
    .menu li {
        display:inline-block;
        float:none;
        margin-left: -5px;
    }
    .menu li li {
        display:block;
        text-align:left
    }
}

And here’s what the main header menu should look like – all centred and ready !
How to center menu in WordPress

Hope this guide has helped you learn how to center align menus in WordPress :-)

If you would like to learn more about how you can use CSS to center other elements, this tutorial is recommended – CENTERING THINGS
And you might want to check out this one too How To Center Your Navigation Menu Tutorial

Categories: