Archived topic

Center Align Text Mobile Menu

5 replies · Started by Former User on August 11, 2017

Viewing posts 1–6 of 6

August 11, 2017 at 3:33 am #363803

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).

August 11, 2017 at 8:25 am #363959

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/

August 11, 2017 at 1:31 pm #364193

thanks, that did the job!

August 11, 2017 at 1:55 pm #364212

No problem!

April 16, 2019 at 1:47 pm #870944

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

April 16, 2019 at 2:22 pm #870958

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!

This archived topic is closed to new replies.

Start building better websites today.