Menu icon Foundation
Sticky Not Working on Nav

OK, I've spent about 7 or 8 hours on this and for the life of me don't know what I'm doing wrong.  I have followed the 'Sticky' documentation as best I can and have tried many many things and I can't get sticky to work at all - not once!   I want a standard icon/nav at the top of the page to stay at the top of the page no matter now far down someone scrolls.  Below is my most current/most pure attempt. What am I doing wrong?

    <nav class="nav-mobile" data-sticky-container>
      <div class="sticky" data-sticky data-margin-top="">
      
      <ul class="menu icon-top expanded" >
        <li><a href="#"><i class="fi-torso"></i> <span>Me</span></a></li>
        <li><a href="#"><i class="fi-home"></i> <span>Home</span></a></li>
        <li><a href="#"><i class="fi-magnifying-glass"></i> <span>Search</span></a></li>
        <li><a href="#"><i class="fi-alert"></i> <span>Alert</span></a></li>
        <li><a href="#"><i class="fi-list-thumbnails"></i> <span>Shop</span></a></li>
      </ul>

      </div>
    </nav>

Note: I have an embedded .js script with the requisite following line in it which I understand is necessary for the sticky plugin to work:

$(document).foundation();

I have not done any custom foundation css or js. I have the everything and the kitchen sink versions of the foundation.css and foundation.js files.

Help?

...Dale

 

 

 

stickynavmenu

OK, I've spent about 7 or 8 hours on this and for the life of me don't know what I'm doing wrong.  I have followed the 'Sticky' documentation as best I can and have tried many many things and I can't get sticky to work at all - not once!   I want a standard icon/nav at the top of the page to stay at the top of the page no matter now far down someone scrolls.  Below is my most current/most pure attempt. What am I doing wrong?

    <nav class="nav-mobile" data-sticky-container>
      <div class="sticky" data-sticky data-margin-top="">
      
      <ul class="menu icon-top expanded" >
        <li><a href="#"><i class="fi-torso"></i> <span>Me</span></a></li>
        <li><a href="#"><i class="fi-home"></i> <span>Home</span></a></li>
        <li><a href="#"><i class="fi-magnifying-glass"></i> <span>Search</span></a></li>
        <li><a href="#"><i class="fi-alert"></i> <span>Alert</span></a></li>
        <li><a href="#"><i class="fi-list-thumbnails"></i> <span>Shop</span></a></li>
      </ul>

      </div>
    </nav>

Note: I have an embedded .js script with the requisite following line in it which I understand is necessary for the sticky plugin to work:

$(document).foundation();

I have not done any custom foundation css or js. I have the everything and the kitchen sink versions of the foundation.css and foundation.js files.

Help?

...Dale

 

 

 

Rafi Benkual over 2 years ago

We wrote a lesson on doing this here: http://zurb.com/university/lessons/create-a-menu-that-sticks

Can you add this to a codepen deom so we can help you more?

http://codepen.io/rafibomb/pen/GmQqQy

Dale Dietrich over 2 years ago

Rafi, that was my starting point. I tried following the instructions on that page and it just didn't work. Not once, not ever.  

When I followed the w3schools tutorials on sticky headers I got the font and its label to stick but when I scrolled text up, the text visibly scrolled under the nav menu. That was the best I achieved. But couldn't get the sticky code samples from the docs or from the lesson you cite above to work at all! That's why I ended up here.  Is there anything wrong with the code I ended up with above which, to my mind, most closely matches that of the Zurb sticky plugin documentation,  but still doesn't stick.

Not sure if you are asking me or someone named 'deam', did you mean Dean? to add to code-pen. If you mean me, I don't know what code-pen is. Do I have permissions to use whatever this is?