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.
Author by
Connor Black
Updated on June 04, 2022Comments
-
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?