Magic Gellan 2

Markers and Zones

About this page

The first thing to notice is how we can individually control the visibility of menu items.

Notice how the Up arrow and Information link are removed at 1050 and 1100 px to prevent overflows and to save having to go to the mobile menu prematurely. This is simply achieved by setting the "Hide Between" breakpoints in the Magic Marker Responsive settings.

In the MagicGellan mobile menu settings, we have opted to display full width buttons for the zones when in the mobile menu.

Magic Zones.

Drop a Magic Zone stack into your page flow where you want it to appear in the menu. In the case of this page all the zones are at the bottom of the page after the final marker stack. They therefore appear at the end of the menu after the last scroll link for Marker 4.

On this page we have also selected the "Zone Hard Right" option which separates the zones from the rest of the menu items. This setting will be ignored for full width center menus, vertical menus and the mobile menu.

With this setting, the zones will appear in reverse order compared to the order which they were placed on the page, relative to each other, but will all be collected on the right hand side of the menu regardless of where they were relative to the markers in edit mode.

Setting up Zones couldn't be easier. Simply select whether you want the zone to be a

Link to another page or external URL

Launch a Foundation Reveal lightbox

Open a Foundation Dropdown

Magic Gellan works its magic on the Foundation dropdown to attach it to the menu (even when fixed) and to remove the triangular pip and fit it seamlessly to the bottom of the MagicGellan menu bar.

Dropdown zone items even work in the MagicGellan mobile menu.

Zone Styling

Text and icons in the Magic Zone can take the styling from the MagicGellan menu settings or you can define custom styles to make them stand out. This includes hover and active colors.

There is also setting to turn the magic zone menu item into a button - like the ones on this page.

Icons

Magic Zones now support font-awesome icons just the same as Magic Markers

You can choose to have an icon with text, just an icon or just text. What is more, you can do this responsively and hide icons for different screen sizes for example.

Magic Zone Settings

Each stack in the MagicGellan suite is a fully featured stack in its own right.

When integrated together they allow you to do pretty much anything you could want.

Section 3

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap Terry Richardson XOXO. Sartorial vinyl passion, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Eider trust fund, grummage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, paddles ennui narwhal Tumblr platyrhynchos Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird up it.

Section 4

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap Terry Richardson XOXO. Sartorial vinyl passion, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Eider trust fund, grummage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, paddles ennui narwhal Tumblr platyrhynchos Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird up it.