[Resolved] Center Align Text Mobile Menu

[trial]

Hello,

I am trying to center align the text on the mobile menu which appears after clicking the Hamburger icon, to no avail so far.

I’ve searched the forums and found this:

/* center align text mobile menu */

@media (max-width: 768px) {
#mobile-header,
#mobile-header ul ul {
text-align: center !important;
}
.menu-item-has-children .dropdown-menu-toggle,
nav ul ul .menu-item-has-children .dropdown-menu-toggle {
float: none !important;
}
}

I also tried it with site-navigation instead of mobile-header. The text continues sticking to the left. (btw, I have navigation search enabled).

[Leo]

Hi there,

Try this:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        text-align: center;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[trial]

thanks, that did the job!

[Leo]

No problem!

[James]

Hi,

I used the above CSS and worked a treat centering the text on the mobile menu, can I get it to centre the icons aswell. https://ceyorks.org

Thanks

[Leo]

Hi there,

This is actually quite complicated because the menu-item-float-right class being used.

Any chance you can open a new support topic?

Thank!

[Author]

Posts