Off-canvas menu

In the previous version of my component library I used to have a slide-in menu, but it was built in an old-fashioned way. Now I found this one on the Foundation website and have built it in RFF. If you want to make a component of the menu, select the top row. The 2nd row, which is the rest of the page, should be made long enough to scroll. That is because then you will see that the 'hamburger' will stay fixed in the same position on the page no matter how much you scroll down.

From a boat trip on the river Havel in Potsdam, outside Berlin.

A note about editing the menu and the page

In order to edit the page, you need to hide the menu. Scroll down to Position in the Editing pane, and select Display none. Don't forget to set it back to Block when done.

It is also possible to have the navigation appear on the right side. For that purpose, add the class position-right to the container off-canvas-wrapper. You probably also want to move the 'hamburger' icon across. Just find the Position in the styles pane, and change the 20px that pushes the icon off the left edge to the same from the right edge.

If you want to edit the menu items in a right-aligned navigation, you need to remove the class off-canvas from the container off-canvas-wrapper. Remember to add the off-canvas class back in when you've done the editing.