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.

Creating 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 .

Activate 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 .

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

Here’s also a quick video recording importing a pre-made template and adding into another demo.


Translating 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: .

Removing focus ring when having menus inside

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