Centre Align Hamburger Icon on Mobile

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?

Yes Tom, let's try that.

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.

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%;
    }
}

Thanks Tom, that's done the trick.

You're welcome :)

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

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

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