Zurb Foundation Sticky Nav Bar

Question

So I'm using the default .top-bar class from the zurb foundation framework, but I'm failing a find a simple way to make the nav bar 'sticky' (follows the user as he scrolls), such as you can do with Twitter bootstrap.

Here's my code, I'm using 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

Am I missing something completely obvious here?

It's quite easy, you probably just skimmed over it in the docs. I've posted the answer and link below. — Ed Charbeneau, Jan 03 '13 at 15:24

score 8 · Accepted Answer · answered Jan 03 '13 at 15:21

8

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

Positioning the Bar

The top bar is built with a single nav element with a class of top-bar. It will take on full browser width by default. To make the top bar stay fixed as you scroll, wrap it in div class="fixed". If you want your navigation to be set to your grid width, wrap it in div class="contain-to-grid". You may use fixed and contain-to-grid together.

answered Jan 03 '13 at 15:21

Ed Charbeneau

4,501
23
23

5

That link is dead now since Zurb updated all of their documentation for Foundation 4. To do this in 4, put div class="contain-to-grid sticky" anywhere in your navigation markup. More details: http://foundation.zurb.com/docs/components/top-bar.html. – David Mar 02 '13 at 13:44
1

http://foundation.zurb.com/old-docs/f3/navigation.php still exists and is still supported – Ricki Mar 03 '13 at 15:57
It says "anywhere in your markup" not "anywhere in your navigation markup" Which means that you can add a sticky bar at any place in the HTML. – Ed Charbeneau May 28 '13 at 13:22
1

@David's link is now unfortunately dead too. Heres the page for F5: http://foundation.zurb.com/sites/docs/v/5.5.3/components/topbar.html - and the F6: http://foundation.zurb.com/sites/docs/top-bar.html – tyler.frankenstein Feb 02 '16 at 15:13

score 0 · Answer 2 · answered Jun 21 '13 at 07:30

You can also give it the class "sticky" and have the menu located anywhere on your page, and when it hits the top it will stick and follow.

You may also wrap your top bar 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. Link to Source

score 0 · Answer 3 · answered Sep 20 '13 at 11:34

To make your .top-bar work nicely and smoothly, you need to wrap it with separate div, like

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

I found this works quite well with my resized browser and iphone Chrome.

Zurb Foundation Sticky Nav Bar

3 Answers3

Linked