Basic, collapsible menu, Materialize

This is the Materialize basic navigation. It will collapse to a 'hamburger' type menu on small screens. It can be placed anywhere on a page. It can also be made sticky, but that only works for wide screens, from the 2nd breakpoint upwards. I'm creating another menu which I'll make sticky and explain how it can be done.

The navigation for small and large screens are divided into two different elements, so they can be styled differently. To get access to the 'mobile' menu you need to make it visible. That is done by opening the Element pane and look up the 'ul link' with the ID 'mobile-demo'. Then go to the Style pane and find Effects. There you see it has been 'translated' -105% off the screen. Set that to 0, then the mobile nav will become visible. After you have done editing, don't forget to 'translate' it back again before saving.

To make a component, select the container 'outside-wrapper'.

Placeholder Picture