When scrolling the page, the image disappears, but the menu stays visible at the top of the page. There is a script in a HTML element that makes this possible, provided that the page has enough contents to make it scroll at all. This functionality can't be fully shown here, because this page isn't long enough, but if you download the component, you will be able to see it.
Important: The script is using the ID of the menu, #shrinkNavbar. That means, that you can change most things (image, colours etc), but that name must be kept. When you add further contents to the site where you are using this component, you should make your own content sections below it.
Sticky Shrinknav
When scrolling the page, the image disappears, but the menu stays visible at the top of the page. There is a script in a HTML element that makes this possible, provided that the page has enough contents to make it scroll at all. This functionality can't be fully shown here, because this page isn't long enough, but if you download the component, you will be able to see it.
Important: The script is using the ID of the menu, #shrinkNavbar. That means, that you can change most things (image, colours etc), but that name must be kept. When you add further contents to the site where you are using this component, you should make your own content sections below it.
Download this component for 'mobile-up'
Download this component for 'desktop-down'