Menu icon Foundation
Magellan 5.1.1 Clones. What?

Screen shot 2014 02 07 at 1.27.06 pm

So the old Magellan just added a "fixed" class when the nav hit the top of the screen. But, now magellen fires as soon as I start scrolling even if didn't arrive at the menu, and it adds a clone so now I have two menus?!

Below is the page when it loads.

And then when I start scrolling.

Screen shot 2014 02 07 at 1.41.23 pm

Screen shot 2014 02 07 at 1.41.30 pm

Magellan

Screen shot 2014 02 07 at 1.27.06 pm

So the old Magellan just added a "fixed" class when the nav hit the top of the screen. But, now magellen fires as soon as I start scrolling even if didn't arrive at the menu, and it adds a clone so now I have two menus?!

Below is the page when it loads.

And then when I start scrolling.

Screen shot 2014 02 07 at 1.41.23 pm

Screen shot 2014 02 07 at 1.41.30 pm
Rafi Benkual over 5 years ago

Can you post your code so we can test it out? Or a link?

Mauricio González over 5 years ago

Hello.

I have the same problem here: http://bit.ly/1b3tWnC

I think magellan is being modified. I find it glithcy.

Is this a test for a future feature or is it a bug?

Im testing on firefox. It jumps when scrolling and theres a point where i see two menus.

Russel Pryor over 5 years ago

Agreed. In version 5.1.1 the transition of Magellan sticking seems very jumpy compared to 5.0. I can scroll half way down the page quickly before it finally sticks.

Russel Pryor over 5 years ago

This actually is turning out to be a bigger issue for my build than I originally thought. The old fixed class that was attached to the actively sticky Magellan allowed custom styling of that particular version. Now, the clone is what remains sitting at the top as the user scrolls. So the active magellan is also the inactive magellan.

But the clone only appears when things go active, which makes it difficult to setup your own sticky-relevant styles.

Before you could just append different styles to the fixed class and have two differently styled states of the Magellan area.

Arun Mistry over 5 years ago

Hey everyone, I don't suppose anyone has found a solution to this as it is already starting to cause problems with my site build.

I have noticed a few things, though they may only be relevant to my working environment. The problem seems to occur when the website is first loaded in the browser, or you force reload the page (Ctrl+F5). Going forward when you refresh the page, the problem seems to disappear. I'm not sure if that helps anyone with a solution.

Lincoln mitchell over 5 years ago

Seems 5.2.2 release today makes it harder to see this issue. But its still there.
I placed this in my sass file as a temp fix.
[data-magellan-expedition-clone] { display: none; }

Jon Thomas over 5 years ago

I've submitted a pull request to give us a "fixed" class again.

https://github.com/zurb/foundation/pull/4956

Zack Warren over 5 years ago

I noticed this goes away when you resize your browser window. Even by a little bit. Once you do that, then magellan behaves as it normally would.

Raphael Durrer over 5 years ago

Hi,

Is there a Solution now? I have the same problem with magellan...

it works fine if i resize the browser window but on reload i see two magellan bars.
i use magellan version 5.2.3 (just updated)

Thomas Janotta over 5 years ago

Hi, it was also in FD 4, but I can't remember how i solved it. (diferent class-names I guess).
It is still there in FD 5.2.3
But the answer by Lincoln Mitchell helps. no visitor resizes/reloads its browser, he just leaves ...

Les Mizzell about 5 years ago

I just upgraded to 5.3.3 - and I''m still seeing this issue.

I'm using Magellan as a sub-menu under the top-bar, rather than a drop down in the top-bar, on a few select pages.

When I start to scroll the page, the top-bar and Magellan "sticks" like you'd expect for just a bit, then suddenly the top-bar vanishes, and it's replaced with a SECOND copy of Magellan.

Resizing the page even the slightest fixes it. But as mentioned before, nobody visiting a site is going to resize the browser just to see what happens...

There seems to be some small browser differences.
In Firefox - the scroll seems smooth until the main top-bar vanishes and Magellan is duplicated
In Chrome - it's really jumpy and the second you start to scroll the top-bar vanishes and Magellan is duplicated.
IE is somewhere between those two.
Haven't tried Safari yet..

Andrew about 5 years ago

I'm also seeing this in 5.3.3. Sometimes it decides to be sticky while the real menu is still mid-viewport, and sometimes the clone doesn't disappear. I'm using it as Les is -- as a submenu beneath a header.

Patricia Palacios almost 5 years ago

Still having the same problem with Foundation 5.4.7. The "sticky" menu only works properly (with that I mean that appears/disappears at the right position) if I wait to do anything until the whole page has loaded.

  1. If I start scrolling before the page has loaded completely, the magellan sticky menu appears at the top of the page before I have reached my submenu.

  2. If I click in one of the items of my submenu before the page has loaded completely, the page skips to the item correctly and the sticky menu is at the top, but it disappears as soon as I scroll up a little bit (it doesn't stay "sticky" until I have gone back up to the position of my submenu)

I see these behaviors in all the browsers I have tested so far (Safari, Firefox and Chrome). Also, once it happens, it keeps happening unless you reload the page or resize it (which, as Thomas Janotta said, no visitor will do).

Also, the solution proposed by Lincoln mitchell ([data-magellan-expedition-clone] { display: none; }) doesn’t work for me, because it just hides the submenu from its position in the page, but the sticky still appears too soon or disappears too early.

Here is the page I am working on: http://www.euskoguide.com/indexFoundation2.html

Please help!!

Patricia Palacios almost 5 years ago

Well, at the end I was able to find a solution, it isn’t that “pretty” since I had to change the code of the set_expedition_position directly in foundation.magellan.js. But here it is:

set_expedition_position : function() {
      var self = this;
      $('[' + this.attr_name() + '=fixed]', self.scope).each(function(idx, el) {
        var expedition = $(this),
            settings = expedition.data('magellan-expedition-init'),
            styles = expedition.attr('styles'), // save styles
            top_offset, fixed_top;

    // PP hack start
    // ignore the menu sticked at the top of the screen when calculating the offset!!
                if (expedition.attr('class') == 'fixed'){
      console.log('ignore this offset!!');
    } else {
      console.log('take this offset into consideration!!');
      expedition.attr('style', '');
      top_offset = expedition.offset().top + settings.threshold;
      // this is specific for my page:
                        // I am ignoring the offset if smaller than 300 px because that
      // means that the picture on top of the menu hasn't loaded yet
      if (top_offset < 300){
        console.log('ignore top_offset, which is:', top_offset);
      }
      else {
        console.log('use top_offset, which is:', top_offset);
        //set fixed-top by attribute
        fixed_top = parseInt(expedition.data('magellan-fixed-top'));
        if(!isNaN(fixed_top))
          self.settings.fixed_top = fixed_top;

        expedition.data(self.data_attr('magellan-top-offset'), top_offset);
        expedition.attr('style', styles);
      }
    }
    // PP hack end
      });
    }