Foundation 6 Magellan sticky not working with Zurb template cli install

Question

I\'m trying to use Magellan in a cli install of the Zurb fdn6 template. The page is running fine but Magellan just doesn\'t work for the sticky nav and throws the following

Answer 1

Unlike F5, making elements sticky in Foundation 6 is a bit tricky and frustrating to be frank. You don't just get it in the first try.

In F6, to make the magellan or any element sticky, a reference point is needed to activate the stickiness.

In this case, you need to have a root div with the id topAnchorExample and then write the next set of magellan generating codes.

Try doing this :

    <div id="topAnchorExample">
     <div data-sticky-container>
      <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom">
       <nav data-magellan>
         <ul class="horizontal menu expanded">
            <li><a href="#first">First Arrival</a></li>
            <li><a href="#second">Second Arrival</a></li>
            <li><a href="#third">Third Arrival</a></li>
         </ul>
       </nav>
      </div>
     </div>
    </div>

And try not to mention the inline css - width:100%. I guess you will take care of that.