Categories
Posts

Sticky Navigation Top Bar in Foundation 3

I recently contributed some code to the Foundation responsive framework project on GitHub and am very proud that the code has made the master branch!

The functionality I wrote turns the standard Top Bar into a sticky navigation menu that will become fixed once the page scrolls to it’s position, just by adding the class .fixed. The class is removed when the page scrolls back up above it’s position too.

As for 3.2.4 (released today) the changelog reads:

Added functionality to create a stick top bar that enables it to be down the page in the markup and stick when it hits the browser edge.

What’s more, head on over to the Foundation’s documentation page:

Sticky Top Bar

As of 3.2.4, you can wrap you topbar in <div class="contain-to-grid sticky"> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll.