Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Center Align Text Mobile Menu

Home Forums Support Center Align Text Mobile Menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #363803
    Günther

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

    GP Premium 1.4.1
    #363959
    Leo
    Staff
    Customer Support

    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/

    #364193
    Günther

    thanks, that did the job!

    #364212
    Leo
    Staff
    Customer Support
    #870944
    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

    #870958
    Leo
    Staff
    Customer Support

    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.