Menu icon Foundation
Magellan & Dropdown megamenu issue

So we're using Foundation 5, and there seems to be an issue with Magellan and Dropdown megamenus. The dropdown works if the user hasn't scrolled (top of page), but if the user has scrolled (anywhere down from the top) and magellan is activated (sticky nav), the dropdown no longer works. It appears, but if the user tries to mouseover the megamenu, it disappears.

Here's a test page: http://www.whoi.edu/prototype

I've already tried this solution, but it doesn't work: http://foundation.zurb.com/forum/posts/19664-fixed-magellan-and-top-bar-dont-play-nice

Can anyone help? What am I missing?

Magellandropdownmegamenutopbar

So we're using Foundation 5, and there seems to be an issue with Magellan and Dropdown megamenus. The dropdown works if the user hasn't scrolled (top of page), but if the user has scrolled (anywhere down from the top) and magellan is activated (sticky nav), the dropdown no longer works. It appears, but if the user tries to mouseover the megamenu, it disappears.

Here's a test page: http://www.whoi.edu/prototype

I've already tried this solution, but it doesn't work: http://foundation.zurb.com/forum/posts/19664-fixed-magellan-and-top-bar-dont-play-nice

Can anyone help? What am I missing?

Rafi Benkual almost 4 years ago

Hi Katherine -
Cool site! It would to get a better understanding of what the goal is. I see a magellan wrapped around top-bar. If you are simply looking to make a sticky top-bar, you can just add this wrapper:

use fixed to fix to top of viewport, sticky for fixed to top when the menu is scrolled to

<div class="fixed"> 
  <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
    ...
  </nav>
</div>

I'm seeing a few errors in the console that might be an issue.

Katherine Joyce almost 4 years ago

Thanks, Rafi!

Almost, but not quite. I implemented this on the banner div, and it's doing what I'd like it to do. The menu sticks at the top, and if a user scrolls, they can mouse over the top links, see the megamenu, and still be able to click on a link within the megamenu. The fix is here:

http://www.whoi.edu/prototype/banner.html

Old version here: http://www.whoi.edu/prototype/ (notice that if you scroll down the page, you see the megamenu, but if you mouseover and try to click on a link, the menu disappears)

But this presents another problem. The banner is fixed above the content. I could add a margin for the content so that it displays below the banner, but as this is a responsive page, that doesn't quite work. That's why magellan was the option I went for.

Is there something else I can do?

Thank you for your help so far!