Zurb Foundation Sticky Nav Bar

15,432

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.

Share:
15,432
Connor Black
Author by

Connor Black

Updated on June 04, 2022

Comments

  • Connor Black
    Connor Black over 1 year

    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?