[Resolved] Centre Align Hamburger Icon on Mobile

Home Forums Support Centre Align Hamburger Icon on Mobile

This topic contains 9 replies, has 4 voices, and was last updated by  Leo 9 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #731485

    Ian

    What should I do to centre align the Hamburger Menu on mobile only (Icon + Menu Label underneath icon). At the moment it is aligned to the right on mobile.

    The other option might be to have the hamburger aligned to the right of the logo.

    GeneratePress 2.2
    GP Premium 1.7.4
    #731517

    Tom Lead Developer

    Hi there,

    Currently it would be quite hard to center, as your mobile header logo is in the way.

    Would you want your mobile header logo to sit on top of the centered mobile toggle?

    #731569

    Ian

    Yes Tom, let’s try that.

    #731583

    Ian

    Sorry I think I misunderstood the question. The mobile menu is currently underneath the header but on the right. I would would be happy to have it underneath the header where it is, but centred.

    #731597

    Tom Lead Developer

    Give this CSS a shot:

    @media (max-width: 768px) {
        .main-navigation .navigation-logo {
            width: 100%;
            float: none;
        }
    
        .main-navigation .site-logo.navigation-logo img {
            height: auto;
            margin: 0 auto;
        }
    
        .menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
            float: none;
            width: 100%;
        }
    }
    #731599

    Ian

    Thanks Tom, that’s done the trick.

    #731601

    Tom Lead Developer
    #762459

    Bill

    I tried the CSS provided above. However, I can not center my hamburger menu. Are there some other tricks to do this?

    #762465

    Bill

    TO clarify when I add mobile header > ON it pushes the hamburger menu to the left.

    When I turn off the mobile header but add my Navigation logo (which is my website logo and that must be there) the logo then shows up in mobile however now it pushes the Hamburger menu to the right.

    What can I do to have my Navigation Logo (which is the website logo) centered on mobile and have the hamburger menu centered either below the logo or above. Thanks

    #762512

    Leo Customer Support

    Any chance you can link us to the site in question?

    Feel free to start a new topic so you can use the private URL field as well 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.