Menu icon Foundation
Magellan Top Offset...gone??

I am using a magellan menu on my site that appears directly below my fixed top bar. In order for my menu to remain below the top bar once a user begins to scroll, I was using a data attribute called 'data-magellan-top-offset' and gave it a value equivalent to the height of my top bar.

I was using Foundation 5.0.3 and everything was working fine. However, since upgrading to Foundation 5.2.1, the top offset doesn't seem to work anymore and I can't find anything in the documentation referring to that data attribute or anything that may have replaced it.

Is there a newer way to offset your magellan menu that I'm missing?

http://foundation.zurb.com/docs/components/magellan.html

<div data-magellan-expedition="fixed" data-magellan-top-offset="60">
  <dl class="sub-nav">
    <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
    <dd data-magellan-arrival="js"><a href="#js">Arrival 2</a></dd>
  </dl>
</div>
            

         

MagellanmenuUpdate

I am using a magellan menu on my site that appears directly below my fixed top bar. In order for my menu to remain below the top bar once a user begins to scroll, I was using a data attribute called 'data-magellan-top-offset' and gave it a value equivalent to the height of my top bar.

I was using Foundation 5.0.3 and everything was working fine. However, since upgrading to Foundation 5.2.1, the top offset doesn't seem to work anymore and I can't find anything in the documentation referring to that data attribute or anything that may have replaced it.

Is there a newer way to offset your magellan menu that I'm missing?

http://foundation.zurb.com/docs/components/magellan.html

<div data-magellan-expedition="fixed" data-magellan-top-offset="60">
  <dl class="sub-nav">
    <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
    <dd data-magellan-arrival="js"><a href="#js">Arrival 2</a></dd>
  </dl>
</div>
            

         
Jordi Touza Bonnin over 5 years ago

According to the version 5.1, you need to use threshold property and put all properties inside data-options.

<div data-magellan-expedition="fixed" 
data-options="destination_threshold:190;threshold:200;throttle_delay:50;">

but there are too many bugs in it and does not work.

Adam D over 5 years ago

Thanks for the reply Jordi. I've tried the method you suggested as well as the following:

 $(document).foundation({
  magellan : {
    threshold: 200
  }
});

But neither work for me. I've never actually been able to get the JS configuration parameters to work even after upgrading to the latest version of Foundation. Sigh...

Jip over 5 years ago

I've still got the same problem too...
And it's quite silly as magellan is my main navigation of my site.

A workaround that seems to work is to add this line of css:

a.anchor{display: block; position: relative; top: 20px; visibility: hidden;}

Niall O'Brien over 5 years ago

This is really annoying, none of these solutions work for me. Can anyone shed any more light on it please?

Rafi Benkual over 5 years ago

Looks like there is a Pull Request that is made to fix this: https://github.com/zurb/foundation/pull/4970

Shoutout to Campbell Morgan for making the PR. We need to pull it down and test it. We'll do it this week.

Adam D over 5 years ago

Thanks for the update Rafi!

Eric Bishard over 5 years ago

Looks like the PR has been merged, I have a sticky top-bar and a sticky magellan. I'd like to offset the magellan 60 pixels below the top of the screen as my top-bar is 60 pixels high. What do I need to do? I have updated my magellan.js file with the Pull Request changes. But none of the methods above are working for me either.

Mark Sutton about 5 years ago

I banged my head against the screen for a bit before stumbling upon this comment about the documentation:

https://github.com/zurb/foundation/issues/5284

There is a new setting called "fixed_top," so for example:

<div class="magellan-container" data-magellan-expedition="fixed" data-options="threshold:-120;destination_threshold:0;throttle_delay:50;fixed_top:120;">

Hope this helps.

Arthur de la Rocha about 5 years ago

Hey Guys the docs will be updated today to reflect this. I am not sure how it was lost. Thanks!