[Resolved] Split Menu not Displaying Well on Mobile

[Joe]

Hello,

I used this method to make a split menu with logo in the middle: https://docs.generatepress.com/article/centering-logo-navigation/

It works great on desktop, but on mobile when the hamburger menu is opened it overlaps behind the logo.

Please could you advise either:

How to put the hamburger menu below the logo on mobile, in a way that works with the split menu,

or

How to make the Logo and other elements move down to make space for the opening hamburger menu on mobile,

or

How to make the Logo on mobile align with the Menu Separator space when the hamburger menu is opened.

Whichever is easiest!

Thanks!

[Tom]

Hi there,

Does this help?:

@media (max-width: 768px) {
    .site-branding, .site-logo {
        position: unset;
        left: unset;
        transform: unset;
    }

    .site-logo img {
        max-width: 200px;
    }

    .main-navigation.toggled li.menu-item-separator {
        display: none !important;
    }
}

Let me know 🙂

[Joe]

Hello,

Great, yes, thanks — with a little tweak that works well.

[Tom]

Glad I could help 🙂

[Author]

Posts