Sticky Menu

Here is an unstyled container which is necessary for the menu to work. Please don't delete it, and don't change the class name, .content. It can be used to put your own site content into, and also to style and tweak it to your heart's desire. (The two lighthouses are showing seafarers the way into Arendal, Norway.)

Sticky Menu

When scrolling the page, the header image disappears, and the navbar becomes sticky at the top of the page. The header image can be changed to just a logo, if you prefer that. If this component hadn't been 'fenced in' by the width of a wrapping container, it would have spread out to full width. 

You can also use any other horizontal menu, but the outer container has to have the ID 'navbar'. Below the navbar there is a container by the class name .content. That class name also has to be kept. The .content container is where you can add your own page content.

To make it work you need to have enough page height to enable scrolling at all.

Placeholder Picture

Download this component.