Off-canvas global sections

You are here:
Estimated reading time: 1 min

Off-canvas global sections are blocks of Elementor content that should be used to display various type of content into an animated side panel.

LinkCreating an off-canvas global section

Access Rey theme > Global sections and create a new one, and make sure to check the “Off-canvas panel” option. After entering Elementor edit mode, you click on the Page settings button( bottom left Gear icon) and configure the offcanvas panel as you want to. Afterwards you can start adding elements.

Screencast video here https://d.pr/v/6jt9fE .

LinkActivate with trigger

To activate the offcanvas panel in frontend, you will need to make use of the Navigation Trigger element. In this element you can select, how the trigger should look like (as a hamburger icon, general icon or even a plain simple button).

Screencast video using Nav. Trigger element https://d.pr/v/J98UnL .

LinkImporting a pre-made one (from Athens demo for example)

Here’s also a quick video recording https://d.pr/v/OUaaDQ importing a pre-made template and adding into another demo.

LinkTroubleshooting:

LinkTranslating the Close button text

To edit the Close text, try editing the Off-canvas global section in Elementor and edit the page settings where you can find the custom text field eg: https://d.pr/v/Zvu5aD .

LinkRemoving focus ring when having menus inside

.rey-offcanvas-content .elementor-button:focus {
	outline: none !important;
}
Was this article helpful?
Dislike 0
Views: 1301

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!