Menu icon Foundation
Foundation 6 Sticky Issues

I am getting about 15px of vertical white space above the nav header bar that I was not getting before using Sticky. The Nav header bar is sticking as you scroll down the page but at about 50-60% of the way down the nav header stops sticking and scrolls up out of view with the rest of the content on the page.

How to I get rid of the white space above the nav bar and get the nav bar to stick all the way to the bottom of the long page? I believe the code below is following the example provided in the v6 documentation.

http://cancer-policy.com/contact/

<!-- DESKTOP NAVIGATION -->

<div data-sticky-container>

<div data-sticky data-options="marginTop:0;" style="width:100%">

 <nav class="top-bar nav-desktop">

 <div class="wrap">

<div class="top-bar-left">

     <h3 class="site-logo">Cash Cancer Life Insurance</h3>   

      </div>

     <div class="top-bar-right">

       <ul class="menu menu-desktop">

       <li><a href="#">Get a Quote</a></li>

       <li><a href="#">File a Claim</a></li>

       <li><a href="../contact/">Contact</a></li>

       </ul>

     </div>      

 </div>    

 </nav>

 </div>

</div>

sticky

I am getting about 15px of vertical white space above the nav header bar that I was not getting before using Sticky. The Nav header bar is sticking as you scroll down the page but at about 50-60% of the way down the nav header stops sticking and scrolls up out of view with the rest of the content on the page.

How to I get rid of the white space above the nav bar and get the nav bar to stick all the way to the bottom of the long page? I believe the code below is following the example provided in the v6 documentation.

http://cancer-policy.com/contact/

<!-- DESKTOP NAVIGATION -->

<div data-sticky-container>

<div data-sticky data-options="marginTop:0;" style="width:100%">

 <nav class="top-bar nav-desktop">

 <div class="wrap">

<div class="top-bar-left">

     <h3 class="site-logo">Cash Cancer Life Insurance</h3>   

      </div>

     <div class="top-bar-right">

       <ul class="menu menu-desktop">

       <li><a href="#">Get a Quote</a></li>

       <li><a href="#">File a Claim</a></li>

       <li><a href="../contact/">Contact</a></li>

       </ul>

     </div>      

 </div>    

 </nav>

 </div>

</div>

This post has been closed. No new replies can be added.

Brett Mason over 3 years ago

From looking at the source code you are using version 6.0.3. Could you update to the latest version and see if this fixes the issue? It looks like the marginTop argument is getting ignored, but I'm using exactly the same markup and it works perfectly on 6.2.3.

Jay Todtenbier over 3 years ago

I used Yeti Launch to create the project 2 days ago. I don't see an option in there to update the Foundation source code. Is there a way for me to verify what version of Foundation I am using? And if my version needs to be updated, can I do it with Yeti Launch? I need to use Sass so am trying to use Yeti to simplify things.

Jay Todtenbier over 3 years ago

I was not able to use Yetti to get to a more recent version of Foundation; however, I was able to update to the current version using the basic css and js without the Sass. This did resolve the Sticky problem. I hope to be able to use Sass so have opened a different Forum request to see if Yetti can install a current version of the code instead of 6.0.3. Thank you Brett for catching the version issue.