Menu icon Foundation
Sticky nav not working in Foundation6

My simple sticky nav used to work in Foundation5, but not in Foundation6:

<div class="top-bar">

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

     <ul class="dropdown menu" data-dropdown-menu>

          <li><a href="#about">about</a></li>

          <li><a href="#portfolio">portfolio</a></li>

          <li><a href="#contact">contact</a></li>

      </ul>

    </div>

</div>

 

And also it is taking the full width of the browser and I want it to display like the other containers, in this case like the yellow container:

Sticky nav

My simple sticky nav used to work in Foundation5, but not in Foundation6:

<div class="top-bar">

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

     <ul class="dropdown menu" data-dropdown-menu>

          <li><a href="#about">about</a></li>

          <li><a href="#portfolio">portfolio</a></li>

          <li><a href="#contact">contact</a></li>

      </ul>

    </div>

</div>

 

And also it is taking the full width of the browser and I want it to display like the other containers, in this case like the yellow container:

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

Danielle over 3 years ago

Hi sanlorena,

You need to add a bit more in F6 to make your navigation sticky. You need to add the sticky container and attach the sticky element to the top bar. If you add the row class to your top bar, it allows it to stay within the container. See the code below.

You can find more information here: http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation

<div class="row" data-sticky-container> 

    <div class="top-bar" data-sticky>
    
      <div class="top-bar-right">
    
         <ul class="dropdown menu" data-dropdown-menu>
    
              <li><a href="#about">about</a></li>
    
              <li><a href="#portfolio">portfolio</a></li>
    
              <li><a href="#contact">contact</a></li>
    
          </ul>
    
        </div>
    
    </div>

</div>

I hope this helps!

sanlorena over 3 years ago

Hi Danielle,

Thank you for your help, it is working now but it still has a few glitches...

These 2 images are the desktop version, so the sticky nav does not stay at the top: 

 

 

Here is the CSS for desktop:

 

This is the mobile version, not sure why there is a gap on the edges, the links move towards the left and it is not sticky anymore:

 

Here is the CSS for mobile:

Thank you!

Danielle over 3 years ago

Hi Sanlorena,

I forgot to add one thing. You need to add this after data-sticky to remove the gap and sticky on mobile:

<div class="top-bar" data-sticky data-options="marginTop:0;stickyOn:small">

If you override the default top bar padding in Foundation 6, it will remove that extra gap when you scroll back up after activating the sticky. That gap might be a bug.

.top-bar {padding:0rem!important;}

For more information, take a look at the following thread: http://foundation.zurb.com/forum/posts/37601-foundation-6-sticky-topbar-not-behaving-properly-at-small-browser-resize

I hope it helps!

sanlorena over 3 years ago

it is all working now, thank you for taking the time to help me out!