Disable hamburger on mobile menu

[Carrie]

Hello! Is there a way to disable the hamburger icon from showing up on mobile? I have a minimalist icon menu set up as a custom mobile menu that I’d like to show instead.

[Leo]

Hi there,

Try this CSS:

#mobile-header .menu-toggle {
    display: none !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carrie]

Nope, that doesn’t appear to do anything. Thank you for the suggestion, though! Is there anything else I might try?

[Leo]

Edited the CSS above.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carrie]

That removed all navigation, instead of having the hamburger icon be replaced with my mobile-only menu. I just noticed that I didn’t finish setting up the mobile menu, however, so let me do that and circle back! Sorry, my mistake.

[Leo]

What if you change the breakpoint to 0px?

This will make it so the toggle never kicks in:
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carrie]

Would that prevent the custom mobile menu from kicking in?

[Leo]

Sorry I thought you wanted the same menu.

Can you try this CSS only?
https://generatepress.com/forums/topic/disable-mobile-menu-for-primary-menu-only/#post-756064

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts