Fixed and Sticky Menus

By now you should be familiar with relative positioning and absolute postitioning, both of which allow you to place items where you want in relative to other elements.

Fixed (Never Moves)

Setting an element to fixed position (position: fixed;) is similar to using absolute positioning in that the position is in relation to the browser, instead of any parent elements. Unlike absolute position though, fixed position is in relation to the viewable portion of the browser. This means, that even when you scroll, an element set to fixed will remain viewable in the browser window.

Sticky (Gets Caught in the Scroll)

Setting the position to sticky position (position: sticky) will lock your nav bar into place once its reached in the scroll. In the following example, I have site information first, followed by the nav bar. Once a visitor scrolls down past the site info and the nav bar hits the top of the window, it will remain at the top unless the visitor scrolls above it again.