How to create sticky topbar in Foundation 6?

Question

I wish to create a sticky topbar in Foundation 6.

In foundation 5 this was easy; simply add the "sticky" class to the top bar.

In Foundation 6 I believe you have to use the new "sticky" attribute (http://foundation.zurb.com/sites/docs/sticky.html) like so:

 <div data-sticky-container>
    <nav class="top-bar sticky" data-topbar role="navigation" data-sticky>
        <div class="top-bar-left">
            <ul class="menu">
                <li class="menu-text"><a href="#">Website Name</a></li>
            </ul>
        </div>

        <div class="top-bar-right">
            <ul class="menu">
                <li class="active"><a href="/">Home</a></li>
                <!-- ... -->
            </ul>
        </div>
    </nav>
</div>

However the top bar looks weird as it doesn't take the full width of the webpage.

What is the correct way of creating a sticky topbar in Foundation 6?

The sticky plugin and the top-bar don't work together yet in Foundation 6. I asked the devs and they said they will add this later. Right now you can use Magellan and the sticky plugin together. Check the Magellan docs. Also read this: foundation.zurb.com/forum/posts/… — Colin Marshall

Hassan Hassan · Accepted Answer · 2016-01-04T21:38:03

I found a solution and i hope you will enjoy it . what i find solution you can use this freely anywhere in page and it will work like foundation 5. foundation 6 is just bit tricky in sticky option okay here is code.

    <div id="try">
      <nav class="sticky-container" data-sticky-container>
        <div class="sticky" data-sticky data-top-anchor="try" data-btm-anchor="destroy:bottom" data-margin-top="0" data-margin-bottom="0">
        <div class="row columns">
            <div class="top-bar-left">
                love
            </div>
            <div class="top-bar-left">
                love
            </div>
            <div class="top-bar-left">
                love
            </div>
        </div>
        </div>
    </nav>
</div>

as you can i see i add a parent div like "try" you must have to do it to tell the sticky where sticky have to start so i used data-anchor-top="try" ok but if you only add this and leave it will go on top just scroll a page just a bit . for more i added data-btm-anchor="destroy:bottom" else your settings .

for bottom anchor you just have to add a div

<div id="destroy">
    finsihed
</div>

better this id you used in footer or use footer id if you want sticky have to move until end of page else anything you like hope you understand .

How to create sticky topbar in Foundation 6?

2 Answers