Materialize menu

User 2811194 Photo


Registered User
34 posts

I am struggling to adapt the Materialize Menu component (Responsive Menu with a logo on the left and nav-links on the right).
What I want is that the hamburger menu stays on screen until 960px and then shows the navbar list for large screens. I have altered the class to hide-on-large-only so that shows that way. And hide the list until large screens which did as expected but then the hamburger menu failed to work. Cannot see a trigger script before or after the changes I made, so not sure how it is suppose to work.

Curious to know what I am failing to see.

BTW - Inger: your basic mobile does exactly what I need and so that is my fall back. Thanks
User 2885740 Photo


Registered User
59 posts

Hi Robert,
I assume you choose the “Mobile Navigation Top” component.
In this case, you need to do the following:
1. Remove the class ‘hide-on-med-and-up’ from the font icon link (= anchor with hamburger icon) and add the class ‘hide-on-large-only’
2. On class ‘navigation-links’ reset the opacity and visibility for breakpoint 601px and add to this class for breakpoint 993px visibility = visible and opacity = 1
3. On class ‘navigation-list’ reset the position and the display for breakpoint 601px and add to this class for breakpoint 993px position = static and display = block.

That’s it. Good luck.
User 2811194 Photo


Registered User
34 posts

Thanks for that

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.