This component is a bit complex. You can download just the actual menu, then you will have a menu that sticks to the top of the page when scrolling, in medium and wide view. On narrow views it just scrolls up with the page. Unfortunately, if you are using Internet Explorer 11, the menu will scroll up and away at any viewport.
If you add the 'menu top', you will also get the picture above the menu, and the menu, when scrolling in medium and wide, will scroll up so that the image disappears, but the menu stays visible. Of course the image can be replaced, also with a logo, or some text.
These two elements have to be positioned with the 'top' as the first element of the document body, and then the menu as the second one. (We can't demonstrate this effect on this page, because it would interfere with the site menu.) As for scrolling, the page will need enough height to be able to scroll at all.
Below the menu bar there is an empty div by the class name of .site-content. When adding contents to your site, please put it in there, to avoid any new content ending up inside the containers pertaining to the navigation. The .site-content is unstyled, so you can make it look the way you want.
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.
Hamburger type Sticky Menu
This component is a bit complex. You can download just the actual menu, then you will have a menu that sticks to the top of the page when scrolling, in medium and wide view. On narrow views it just scrolls up with the page. Unfortunately, if you are using Internet Explorer 11, the menu will scroll up and away at any viewport.
If you add the 'menu top', you will also get the picture above the menu, and the menu, when scrolling in medium and wide, will scroll up so that the image disappears, but the menu stays visible. Of course the image can be replaced, also with a logo, or some text.
These two elements have to be positioned with the 'top' as the first element of the document body, and then the menu as the second one. (We can't demonstrate this effect on this page, because it would interfere with the site menu.) As for scrolling, the page will need enough height to be able to scroll at all.
Below the menu bar there is an empty div by the class name of .site-content. When adding contents to your site, please put it in there, to avoid any new content ending up inside the containers pertaining to the navigation. The .site-content is unstyled, so you can make it look the way you want.
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.
Download the menu component
Download the menu top component