Magic Link Stack

About Magic Links

This page demonstrates the use of a fixed bottom MagicGellan transofrming to Nav Dots for small screens. The text describes the use of the Magic Link stack.

The Full Width centered setting on MagicGellan exapnds the links to fill the full width of the screen (or the full width of the body if contain within body is selected.

At 800px MagicGellan is set to transform to Nav Dots and Tool Tip hover links.

Because this page has all of its contents in Sections stacks, it is then possible to easily add some space on the left to accommodate the dots nicely.

The Sections selector that contains all the content is .inner-content and so we simply add a little padding within a media query that is activated below 800px like so:

@media screen and (max-width:800px){	
   .inner-content{
    	padding-left:40px
   }
}

Narrow your browser to see it in action

Magic Link stacks allow you to turn any stack into a Magellan link.

Magic Links work with both Magic Marker and Foundation Magellan markers.

You do not need a Magellan menu of any sort on the page to use Magic Links. Just add a link and a marker and you will get inertial scrolling between them. This is all built in to the Foundation framework that is on every Foundation page.

Just to demonstrate how ridiculously easy it is to create a Magic Link, below is a Button Plus stack in a Magic Link that is set to the marker id of the first marker on this page.

Clicking the Button will therefore scroll the page back to the top.

My Image
My Image

Magic Links are also great for navigating between full height Sections.

All the up and down arrows on the main MagicGellan demo page are simple ButtonPlus stacks with no text and just a font awesome fa-angle-down icon inside a magic link stack.

The Magic link stacks are placed inside a Sections Fix stack to lock them to the bottom (or top) of each Section.

One Important Rule To Remember

Anything that you drop in to a Magic Link must NOT be a link itself

This means that if you use a button in a Magic Link stack it must be set to Type: Button in the stack settings and not the default Link setting.


Anything set to be a link will trap the click even and prevent Magic Link registering it. This is the same with all stacks containing links and is not peculiar to Magic Links.

Please do not contact support stating that the Magic Links are not working until you have verified that they do not contain a link enabled stack. (Although I know this will happen!)

Compensate Height.

This setting will be very rarely changed and you should only do so if absolutely necessary.

Compensate height, will apply a compensation to the Magellan arrival points to account for differences in Magellan destination heights.


This only becomes important if you have multiple MagicGellan menus on your page and the indicated active menu item on each one does not change at exactly the same time.

Magic Link Settings

My Image