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
Materialize menu
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.
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.
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.