Sticky Grummage in A Pillar

With SideNav+ Integrated Off Canvas

for mobile sizes

Filler Text Only Below

The menu title is an html edit box. This gives two advantages over being set in the stack settings the way TopBar operates.

You can use HTML code in it - for example add FontAwesome or other icons.

If you make the CleanNav into a Partial so that it is global through out all your project pages, you can "un-pin" the Title Area in the partial to allow per page setting of the text if required.

Setting up the marker offsets in the sections stacks

Each Section has a magellan marker with the offset at 40px

This ensures that they clear the nav bar.

There is also padding on each of the 1columns within the Sections Stack to provide space between sections. The size of this padding will obviously alter the required value of the offset in the Sections Stack

Note:
You do not need to use Sections stacks. MagicMarker stacks will provide exactly the same functionality and are lighter in weight.

Sections however give you the ability to control the background colors, images and gradients plus lots of detailed, responsive and proportional layout and sizing options. If you think you will need these features, use Sections.

Sections is not a heavy weight stack by any means and is very efficient code wise. I only make this note as MagicMarkers are super light-weight and if all you need to do is add a container for your sections markers they are a simpler solution.

Setting up the Pagelist stacks used in the left menu

The PageList stack generates various lists of pages - similar to the Foundation SideNav stack.

PageList however allows you to opt to display only the sub-pages of a named page. As per the picture on the right, simply select Named SubNav Only in the Scope setting.

Enter the name of the page containing the subpages required for that column in the dropdown menu.

By using this method, it means you can control the grouping of pages in the dropdown, use whatever responsive column stacks you like to arrange the contents and further more even add other content to the drop down at will.

The actual parent page (LinksA in the example opposite) can be blank and will never show a link, it merely acts as a place holder for the page folder structure.

Setting up the MagicGellan for the right hand menu

MagicGellan is a very powerful menu system but we will be using it in a simple list mode for the menu content.

If you require nav dots on the page (at any defined breakpoints) simply add another MagicGellan menu stack to the page itself and set that to always display nav dots within the breakpoint range required. An example of this is on the next page.

The key settings are on the right.
Orientation : Vertical
Positioning: Static
Width : Auto
BarBackgound: None (so our dropdown background shows through)

Marker Mode: Auto (this will generate the menu names from those specified in the Sections stacks - or MagicMarkers if preferred.

Show Dots : Never (we always want our dropdown to contain menu items - regardless of other dots required on the page)

(Breakpoint is irrelevant in this configuration)

About the MagicGellan width and text alignment

MagicGellan will occupy 100% width of its container.

We center the text as opposite, although this could be right aligned if the CleanNav dropdown is of a constrained width on the right.

In this page, I have set the Links Bg and Active Bg opacities to zero. This stops the full width "hover bar" appearing on each of the menus and we simply get the white hover color on the text itself

If you wish to use the background hover colors then they will occupy the full width of the dropdown.

If you wish to contain this width to just a little wider than the text then simply change the layout in the built in stacks settings at the very top of the MagicGellan settings.

In this page, I have set the Links Bg and Active Bg opacities to zero. This stops the full width "hover bar" appearing on each of the menus and we simply get the white hover color on the text itself

If you wish to use the background hover colors then they will occupy the full width of the dropdown.

If you wish to contain this width to just a little wider than the text then simply change the layout in the built in stacks settings at the very top of the MagicGellan settings.

Also to note in the image on the right is that I have added 20px bottom padding to the MagicGellan to give a little space beneath out menu in the dropdown.

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl passion, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, grummage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland 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.

Site Links

Page Links