Foundation TopBar + Magellan


(Garth Poon) #1

Hi all, I’m just starting to learn how to build sites with the Foundation theme, so forgive me if this question has been asked before.

Is it possible to combine Magellan (or MagicGellan) with regular menu items in the TopBar? I’m building a website where the Home page is tall and has several sections, but it also has a few other pages…so I was thinking it would be cool to have half of the TopBar with Magellan items, and half of the TopBar with regular page menu items (I hope that all makes sense).

Are there any articles or forum posts that describe how to do this? I’ve tried figuring it out myself, but I can’t seem to get it working.


(Andrew Tavernor) #2

Topbar is either normal site links or totally magellan links dependent on the menu setting. This was one of the main use cases that prompted me to write MagicGellan.

There are lots of ways that you can combine the two for instance this page has a TopBar and a sticky MagicGellan http://demo.bigwhiteduck.com/magicgellan/markers/ although it could be fixed directly below the Topbar so that it appears as one bar.

You could also have a vertical Magellan with a TopBar. This page has a vertical MagicGellan for wider browser sizes transforming to dots for narrower screens. There is not TopBar on the page but it would work fin with one http://demo.bigwhiteduck.com/sections/layers/

Another choice would be to use the Joey stack to place MagicGellan inside TopBar and optionally allow it to appear and disappear when the page is scrolled. This page shows it in action although it contains a standard magellan (MagicGellan did not exist when I did the page) which requires some CSS to work. MagicGellan in static mode can be dropped into Joey without modification and will work out of the box. http://demo.bigwhiteduck.com/ButtonPlus/Examples/

These are just a few suggestions, lots more possibilities exist and people have done some very creative things with the combination of TopBar and MagicGellan. I hope they give you some ideas.


(Garth Poon) #3

Thanks @tav! The suggestions are really helpful. I also explored your website and found the downloadable demo RW projects…thank you so much for providing those for us!


(Garth Poon) #4

Hi @tav , would it be possible to send me the project file that you used on http://demo.bigwhiteduck.com/magicgellan/markers/ ?

I love the way that you have a TopBar, a banner, and then a MagicGellan bar underneath the banner. I’ve tried doing that on my site, but I can’t get the MagicGellan stack to be sticky (even though I’ve changed the setting to “Sticky”).

My email address is gcspoon at gmail dot com


(Andrew Tavernor) #5

Hi Garth, yes of course. Could you drop me an email to support@bigwhiteduck.com and I will send you the project. I don;t want to place the link on here as it has a few other internal bwd stacks on it which people won’t have. I will be releasing the full project file soon but I am in the middle of stacks 3 updates and the demo file additions have had to slip just for the moment.

The secret of the magicMarkers page though is actually in the tooltip for the magicGellan position setting - if you want a smooth sticky mode with magellan that works well with topbar just use the Pin stack to do it. With MagicGellan set to static inside a sticky pin stack it is very easy.

Hope to hear from you soon via the email.

Best regards,
Andrew


(Lisa Sandler) #6

New to Foundation and Big White Duck… I’m looking into using Top Bar with Magic Gellan 2…

So I’ve set this up: https://www.lisasandlerphotography.com/portfolios/lifestyle/#maternity-baby

When I click on the corresponding menu button, it goes too far below the headline for the next menu. How do I fix it so it lands on the title?

@tav

thanks, Lisa