Summary

The Off Canvas Menu is a slide-out menu that is usually used for the mobile devices. The menu panel also can include other controls.

Here is the video overview:

Usage

The Off Canvas Menu can be activated under the Horizontal Menu >> Mobile Menu >> Opening:

off-canvas-1.png

There are two options: Off Canvas and Slide Menu. When Off Canvas Menu option is used the menu overlaps the page, when the Slide Menu option is used the menu pushes the content to the right.

off-canvas-2.png

Note: The Off Canvas and Slide Menu options are not compatible with the Align by Margins options selected under the Positioning menu.

When Off Canvas menu is enabled, the new options will appear:

off-canvas-3.png

Content Shading controls the fade area that appears over the content when the menu is opened.

Close Icon allows to edit the close menu icon options and shape.

Transition is the option to control the animation used on the menu opening.

Header and Footer options add the areas in the slide menu above and below the menu content correspondingly. These areas can contain various controls and even placeholders for the CMS modules.

Note: Joomla Module Position control cannot be inserted into the Header and Footer areas as it is restricted by the Joomla module functionality.

off-canvas-5.png

### Summary The **Off Canvas Menu** is a slide-out menu that is usually used for the mobile devices. The menu panel also can include other controls. Here is the video overview: <iframe width="850" height="478" src="https://www.youtube.com/embed/mw3NsETU4lA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen ></iframe> ### Usage The **Off Canvas Menu** can be activated under the **Horizontal Menu** >> **Mobile Menu** >> **Opening**: !off-canvas-1.png! There are two options: **Off Canvas** and **Slide Menu**. When **Off Canvas Menu** option is used the menu overlaps the page, when the **Slide Menu** option is used the menu pushes the content to the right. !off-canvas-2.png! **Note**: The **Off Canvas** and **Slide Menu** options are not compatible with the **Align by Margins** options selected under the **Positioning** menu. When **Off Canvas** menu is enabled, the new options will appear: !off-canvas-3.png! **Content Shading** controls the fade area that appears over the content when the menu is opened. **Close Icon** allows to edit the close menu icon options and shape. **Transition** is the option to control the animation used on the menu opening. **Header** and **Footer** options add the areas in the slide menu above and below the menu content correspondingly. These areas can contain various controls and even placeholders for the CMS modules. **Note**: **Joomla Module Position** control cannot be inserted into the Header and Footer areas as it is restricted by the Joomla module functionality. !off-canvas-5.png!