Clever Geek Handbook

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

I am using the Foundation framework to build my web page and I am using their Sticky Top-Bar navigation as a container for a simple select form. While I did work when I scroll down the page and the Sticky Top-Bar catches the top of the window, the rest of the page content "jumps" by about 60px or so. I ran into it for 3 hours with no luck for a long time now.

I would greatly appreciate any ideas or suggestions, especially from those familiar with the Foundation.

Here is a link to the page of interest ...

Thank!

+3


source to share


2 answers


The main sticky Foundation class had its navbar in mind. The height of the navbar is usually 45px, so when it's absolutely positioned with a sticky class, the body gets padded with a similar height to compensate for it. You might want to play around with the top padding .f-topbar-fixed

so it doesn't jump over.



+1


source


It is possible to remove the scrolltop

<nav class="top-bar" data-topbar data-options="scrolltop:false;">


From this post http://foundation.zurb.com/forum/posts/881-page-jumps-to-top-on-top-bar-hamburger-icon-click

0


source






More articles:


All Articles