Sticky shrink-nav

The header shrinks when scrolling down

I found this building block on the Foundation home pages. Shrinking navs and headers have been very popular for quite some time, so I decided making one for SDv3.

This building block is best suited for websites where you navigate to different pages. If you want to create a 'one-pager', with navigation down to different sections, you should consider this file instead. It is the one I have used for the index page of my sharing folder.

I tried swapping the actual menu for one in 'hamburger' style and with dropdowns, but I have not yet found out how to do it. If someone finds out, I'd be interested. If you want to use a different menu, you need to use the same class names as here, since they are also used in the bit of java script and css in the settings.

It is full possible to change the height of the header. If you do, then be advised that the body has a padding-top of the same height as the header plus a little bit. That is to prevent the container below (in this case with the class name 'contents') from sliding up behind the header. Also, make sure the contents of the page is sufficient to make it scroll at all.

As mentioned, the menu has some styling and a script that can be found in the Settings, so to be safe, it would be best to save it as a theme first. A component can be made by selecting the container 'sticky-shrinknav-header'.

Below here I have added a bit of contents to make the page scroll.