Menu icon Foundation
Magellan Menu Weirdness...

I've added a magellan menu (using Foundation 5) to a page on my site to act as a "submenu" but seem to be experiencing some problems...

Firstly, when I click on a link in the menu and brought down to that section in the page, I need to figure out a way to add an additional offset as my magellan menu is covering the top part of that section. I haven't seen any parameters in the documentation that allows you to do this with JS.

Secondly, clicking on items in my magellan menu does what its suppose to do (i.e. take you to that section on the page). However, I am noticing some weirdness with active links being highlighted when they are not suppose to as you manually scroll. In some cases a menu link gets highlighted too early, some links get skipped altogether, etc. I'm really not sure what's going on.

You can take a peak at a sample page with these issues here: http://bit.ly/1mkT3Sl. Hopefully I explained everything clearly but if not, feel free to let me know and I'll attempt to clarify... ;)

Thanks!

MagellannavigationFoundation 5

I've added a magellan menu (using Foundation 5) to a page on my site to act as a "submenu" but seem to be experiencing some problems...

Firstly, when I click on a link in the menu and brought down to that section in the page, I need to figure out a way to add an additional offset as my magellan menu is covering the top part of that section. I haven't seen any parameters in the documentation that allows you to do this with JS.

Secondly, clicking on items in my magellan menu does what its suppose to do (i.e. take you to that section on the page). However, I am noticing some weirdness with active links being highlighted when they are not suppose to as you manually scroll. In some cases a menu link gets highlighted too early, some links get skipped altogether, etc. I'm really not sure what's going on.

You can take a peak at a sample page with these issues here: http://bit.ly/1mkT3Sl. Hopefully I explained everything clearly but if not, feel free to let me know and I'll attempt to clarify... ;)

Thanks!

Rafi Benkual over 5 years ago

I think some some of that is happening because of the the height of the sticky topbar in addition to the magellan height.

There is an open GitHub issue to create a setting for the threshold:
https://github.com/zurb/foundation/issues/2198

It is odd how far before the destination it is going active. Also skipping 7 is odd. We'll look further in it.

Ryan Muller over 5 years ago

I'm having the exact same issues with Magellan. I've noticed that it's skipping the second to last section. This seems to confirm that observation! For the scrolling, I used the ZeptoScroll solution as linked.

Adam D over 5 years ago

Thanks for the replies guys. For the time being, I figure I should be able to manually fix the magellan destination issue (thanks @Ryan—I'll give ZeptoScroll a try). But yeah, no idea what is happening when the menu items are being highlighted at the wrong times (or being skipped as mentioned). Definitely open to any suggestions.

Yann Lossouarn about 5 years ago

Hi,
As far as I can see, the issue might be related to a cross-effect between Foundation AND the browser used. When you make a simple page (without Foundation), using Chrome or Foundation does not change anything. With Foundation, it seems on Chrome, when you click on a #link to an inline anchor, the scroll is set so that the anchor is at the top of the window -> usual behaviour, no problem. On Firefox, the same click will lead the anchor to be shown in the middle of the screen, and not at the top. Therefore, the active state is not given to the item you just clicked, because it is only given to the anchor when it comes close to the top...
An idea of the way it can be solved, anyone?

Alex Kempton about 5 years ago

Might have a solution for you guys.

I see you've given the data-magellan-destination and id attributes to the container of the section rather than the header inside it. I think the plugin gets confused by this! I was having some pretty crazy issues too, but after applying these attributes to the header instead, everything worked perfectly.

Hope that helps!

Alex :)

Eckard Ritter about 5 years ago

Thanks so much! This was the problem.

When I had assigned ids to the containers there were serveral problems in parallel and I could not find out the relevant details. For instance, having an orbit slider in a div made a difference: commenting it out, it worked (nearly), that was reproduceable.

Assigning ...... instead of ...... immediately worked.

Eckard Ritter about 5 years ago

<!-- instead of -->
<div id="xxx"><h2></h2>....</div>
<!-- assign the id like so: -->
<div><h2 id="xxx"></h2>....</div>

Adam D about 5 years ago

Wow! You guys are awesome. I've been wracking my head over this for a while now. That seems to do the trick!

One thing though—what if I want the link to bring me to the destination and have it offset by a handful of pixels? I have some whitespace above my section heading so it would be nice if I could add a bit of a buffer when the menu takes users to that section. I guess an easy workaround for this is to add padding to the top of my heading but I'd prefer to avoid taking that approach.

Any ideas? Not sure if there is some secret magellan parameter I can add to achieve this... ;)

Charlie Hinojosa about 5 years ago

Hi Adam,

Your post helped me figure out this issue when I scroll. However, the magellan is still covering up content when clicked on. I hope they find a solution for this.

How did you achieve the smooth scroll on your demo site?

Adam D about 5 years ago

Hi Charlie. There are a handful of jQuery plugins that you could use to add the smooth scroll but I simply added this bit of code to my JS:

 // Scroll to
$(document).ready(function() {
  function scrollToAnchor(aid){
    var aTag = $("div[id='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow'); // If you want to offset the destination, you can add + or - and the pixel value next to "top"
  }
  $(".magellan-menu a").click(function() { // Make sure you replace the selector with whatever you're using
    var href = $(this).attr('href').replace('#', '');
    scrollToAnchor(href);
  });
});

Hope this helps.

Rafi Benkual about 5 years ago

Try Magellan now with 5.1 installed. We fixed some of the horizontal alignment and added data-options for threshold found here http://foundation.zurb.com/docs/javascript.html

Adam D about 5 years ago

Thanks Rafi. However, I can't seem to get the destination offset to work.

 $(document).foundation({
  magellan : {
    destination_threshold: 100
  }
});

Also, I was using 'data-magellan-top-offset=' on my menu and that no longer seems to be working... :(

Jip about 5 years ago

I can't get destination_threshold to work either...

Because right now the active labels on the submenu aren't behaving properly. It keeps the previous item highlighted when it is clicked.