Zurb Foundation Sticky Nav Bar

Question

So, I use the default .top-bar class from the zurb database framework, but I can’t find an easy way to make the navigation bar sticky (it follows the user when scrolling), for example, what you can do with Twitter loading.

Here is my code, I use jade:

 nav.top-bar ul li.name h1 a(href='#') Site Title li.toggle-topbar a(href='#') section ul.left li.divider li a.active(href='#') Link li.divider li a.active(href='#') Link li.divider li a.active(href='#') Link li.divider li a.active(href='#') Link li.divider section ul.right li.divider li.has-dropdown a.active(href='#') Log in 

Did I miss something completely obvious here?

Answer 1

On the docs page: http://foundation.zurb.com/docs/navigation.php

Panel Location

The top bar is built with one nav element with the top bar class. By default, the browser width will be maximum. To keep the top panel fixed while scrolling, wrap it in div class="fixed" . If you want your navigation to be set to your grid width, wrap it in a div class = "contain-to-grid". You can use fixed and grouped together.

Answer 2

You can also assign it a sticky class and have a menu located anywhere on your page, and when it gets to the top, it will stick and follow.

You can also wrap your top panel in a class = "keep-in-mesh sticky" div and place it anywhere in your layout. When navigation hits the top of the browser, it will act as a fixed top bar and stick to the top as users continue to scroll. Source Link

Answer 3

To make your .top-bar work beautifully and smoothly, you need to wrap it in a separate div, for example

 <div class="sticky"> <div class="contain-to-grid"> <nav> ... </nav> </div> </div> 

I found this to work very well with my modified browser and iPhone Chrome.