Top Off Canvas Menu

Vertical small to Horizontal medium


Class blue
Id yellow
Type pink
Attribute green
Attribute Value orange 

Add 2 Rows from Layout

The top row will hold any kind of menu you want and a close icon.
The second and following rows / containers will be the page content and we'll add a fixed menu icon in the second rows container.

For this example I set all the rows to be full width.
In Inspector select the top row double click 
In Design / Style apply to Type / Dimensions max-width to none

Setting up the Top Row

In Inspector select the top row's column double click to select it
I gave the row a class of top-row and made it a grey color for working in it

Go to content and from text ADD a font icon link I used cross3
In the font-icon class ADD close-button
In the font-icon Attributes ADD data-close from the drop down

In that column you add your menu, I just used a UL link for this
Then added the classes vertical & menu to it for a quick example.
You can use anything, foundation menus, text link or buttons.

In Inspector select the top row double click
In Classes ADD off-canvas & position-top
In id ADD offCanvas
In Attributes ADD data-off-canvas from the drop down
NOTE: To see the off canvas in RSD you have take the off-canvas & position-top classes out and then add them back in after editing it.

Setting up menu icon in the Second Rows column

Select the second rows column and from elements ADD a font icon link
Select that icon, I used menu5 from the drop down.
For it's Attribute use data-toggle
The Attribute value is the id we used for the top row offCanvas
To make it fixed to the top go down to Position and select fixed, the right most selection.
Then go to Z-index change it to no unit with a value of 1
In the first box on the left (top) under position change auto to px and use a value of 3
In the second box (right) under position change auto to px and use a value of 80
Those are from left to right: top right bottom left so you can fix it to any position you like.

Use Preview on to see it in your browser

Now preview it in your browser and you'll have a fixed menu icon when clicked will drop down a menu.
In that menu will be an X that will close it or you can click the menu icon to close it.

Making some changes

Let's make the menu section so when we click on the menu icon it doesn't jump to the top and open.
Select menu5 icon from the inspector or by just clicking on it.
What we do for that is change the default link from just a hash tag (#) and add no-link so it looks like #no-link in the Href box.
Also do that kind of link for the top cross3 close icon so it won't jump.
Now preview on and when you scroll down it'll open where you are on the page.

Want to hide the menu5 icon when the menu drops?
Select it and go down to position, in there make the Z-index 0
Do that for the regular state and for the hover state.

Let's work on the menu

To see that top row in RSD we have to remove the off-canvas & position-top classes then add them back later.
So go to the Inspector select the top row and double click that puts you in design and remove those two classes.
You don't have to for this, you can do it without seeing the changes until preview on if you like.

Making the menu vertical on small screens and horizontal on medium and above screens

Select the UL link from Inspector
ADD the class medium-horizontal from the drop down.
Preview on and you'll see on larger screens we now have a scroll bar.
To remove that select the column that it is in from inspector.
ADD the class off-canvas-wrapper from the drop down.

Moving the icons for this option

The icons can be better for this vertical to horizontal.
Select the menu5 icon go down to position.
For top change the 3 to 0, and right change 80 to 10.
From the Inspector select the top cross3 icon and go to position.
Change it from the default 0.5 rem in top to 0 px and right to 10 px

That's it for this round

Remember to put that top rows off-canvas & position-top classes back if you removed them.
NOTE: When you remove / replace those classes in RSD sometimes the top row resets to 250 height. Use the Inspector to set it back to auto.