This Materialize menu is a bit more advanced than the 'basic' one. It will also collapse to a 'hamburger' type menu on small screens. It can be placed below some other element, like an image, and on small and medium screen it will scroll up with the page. But on large viewports, after the second breakpoint, it will scroll just up to the top of the screen and then stay visible. To achieve this, set the position to 'sticky', the distance to the top to 0px, and then add a z-index which puts it above any other page elements. The sticky position works fine in all the usual browsers, except for IE11. There the menu will just scroll away as on mobile devices.
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'.
Sticky menu, Materialize
This Materialize menu is a bit more advanced than the 'basic' one. It will also collapse to a 'hamburger' type menu on small screens. It can be placed below some other element, like an image, and on small and medium screen it will scroll up with the page. But on large viewports, after the second breakpoint, it will scroll just up to the top of the screen and then stay visible. To achieve this, set the position to 'sticky', the distance to the top to 0px, and then add a z-index which puts it above any other page elements. The sticky position works fine in all the usual browsers, except for IE11. There the menu will just scroll away as on mobile devices.
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'.