Adding Zurb’s Foundation Magellan Menu – Need Your Help

Yesterday I Tweeted that I will be adding Foundation’s Magellan Menu to WP-Forge.

This was initially intended for my new theme WP-Edify but I was asked by a user if it was possible to use Magellan in WP-Forge. I got to thinking about it and decided that it would make a great addition to Forge. I mean, you can basically add anything Foundation related with to Forge, so why not the Magellan menu?

What to do?

I already have the menu working, with the nav walker and all the necessary markup and it works really well if I do say so myself πŸ˜‰ . However I have run into a bit of a quandary: Now that I have it working, how exactly do I implement it in the theme itself?

So far it seems there is only one possibility and that’s to use it within the front page template. The way I understand it, in order for the magellan menu to work properly, the content needs to have sections. The links in the menu target these sections and when one is clicked, the page scrolls to that specific section.

In my tests, if the menu is on a page where there are no sections a jQuery error is displayed in Chrome Dev Tools:

Uncaught TypeError: Cannot read property 'top' of undefined
    at Sticky._parsePoints (foundation.js?ver=
    at foundation.js?ver=
    at e (jquery.js?ver=1.12.4:3)
    at dispatch (jquery.js?ver=1.12.4:3)
    at r.handle (jquery.js?ver=1.12.4:3)

and the Back To Top arrow does not appear when you scroll down. Now when the menu is on a page that has added sections in the content, everything works as it should. As you all know, I try my best to keep WP-Forge free of any type of notices and errors. So this tells me that the menu is going to need either a specific header orΒ a specific page template, maybe even both.

Your Thoughts

So rather than just adding it the way I would want it, I thought I would open up the discussion and see what the users of WP-Forge would have to say. Seriously, I’d like to know.

How you would do it? What would you like to see? I would like to hear anything and everything you guys have in mind, even if it’s off the wall.

6 thoughts on “Adding Zurb’s Foundation Magellan Menu – Need Your Help

  1. First I’ve looked at Magellan.. looks cool and important for 1 page or longer page designs people are doing these days.
    Hmmm, is it an optional replacement for top bar? How does it work for a multi page site?

    • Hey there,

      Exactly why I wanted to use it with WP-Edify, she is a one page theme. And it does work extremely well and the big take away is that it’s already included so there is no need for another script to be added. Less bloat.

      And no it’s not an optional replacement. As I stated above, it looks like it can only be used on a page that has the proper markup, not necessarily sections, but the proper calls, if that makes sense.

      And I have no idea how it will work with multisite. I don’t use multisite so I couldn’t tell you. Maybe once I have decided how to use, you can test πŸ˜‰ (as usual…lol)

  2. Seems a shame to reinvent “sections” within a theme that’s built on F6. The Mesh plugin has already accomplished this but has no way to hook (that I see) into Magellan’s menuing. If there was a UI element / hook between Forge and Mesh’s sections via the existing WP menuing system that could be pretty “awesome”!

    • I see you are still pushing Mesh…lol no worries amigo, it’s still looking good. However I did do some further testing and I was incorrect in my statement above, that sections are needed. They are not.

      The only thing is to make sure you have the proper data calls. The way I had it setup for testing was exactly how they had it on the Magellan page. They used sections and gave those section the data calls.

      So what I did is I set up some regular content, with three h4 header tags and some paragraphs under each h4 tag. Then I added the data calls to the h4 tags themselves. The menu worked like a charm.

      So I stand corrected, sections are not needed, just need the proper data calls added to the content so it can scroll properly.

      And trust me, If “I” can get the magellan menu to work I’m sure they can get it working πŸ˜‰

  3. Good on ya, Thomas. I like the concept of having it as an optional extra for certain page templates, such as the homepage template. The anchors for the Magellan menu could be set on the specific page, or in a menu which is then assigned to that specific Magellan menu.

    • No thank you Dominic for asking me the question that made me think about it, which made me do it…lol! All the credit goes to you amigo πŸ˜‰ I do think I have finally figured out how to implement this though. I think its going to be a menu assigned to the front page template. I mean that’s the only plausible way I can see doing it where it makes sense.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.