Sticky Nav Top-Bar Making Rest of Page Jump Down (Foundation 5)

Question

I'm using the Foundation framework to create my webpage and I'm using their Sticky Top-Bar navigation as a container for a simple Select Form. Although I did get it to work, when I scroll the page down and the Sticky Top-Bar catches the tope of the window, the rest of the page content 'jumps' down about 60px or so. I've messed with it for about 3 hrs now with no luck.

I'd greatly appreciate any insight or suggestions, especially from anyone who's familiar with Foundation.

Here's the link to the page in question...

Thanks!

Answer 1

The Foundation sticky class was meant with its navigation bar in mind. The height of the nav bar is normally 45px, so when it's absolutely positioned with the sticky class, the body gets a padding with a similar height to compensate for it. You may want to fiddle with the top padding of the .f-topbar-fixed so it doesn't jump on scrolling.