The Offcanvas widget provides a great way to display content outside the page by transitioning it into view. It can be used for anything from displaying off-screen navigation or other content to notifications.
There are plenty of reasons why the Extras’ Offcanvas widget is useful for your site. It’s built with tons of options and support any type of content.
- Custom trigger, including an animated burger icon, simple text or a custom selector so that you can open it from any element on the page.
- Any content — Enter content from a WYSWIG editor or select any Elementor template you want
- Four transitions — Reveal, Push, Overlay, Shift – with a duration option
- Anchor Navigation — The widget recognises anchor links and handles them accordingly.
- Custom selector for closing the offcanvas using any selector from inside the content of the offcanvas.
These general settings can be found under Content > Settings. They provide general options for the behaviour of the Offcanvas widget as well as access to additional features.
- Toggle Offcanvas — A button to toggle the offcanvas panel inside the editor without having to click on the trigger
- Position — The position of the panel when opened. Can be “Top“, “Right“, “Bottom” or “Left“.
- Allow Page Scroll — If enabled, the content of the page can be scrolled when the panel is open
- Animation — The animation type of the panel when it’s opened. Can be “Reveal“, “Push“, “Overlay” or “Shift“. See examples here.
- Animation Duration — How long the animation should last.
- Anchor Navigation — If enabled, the widget will look for links to anchors on the page inside the offcanvas panel and bind events to those links that scroll the page content to their respective anchors.
- Close After Scroll — Wether or not to close the offcanvas panel when the page scrolls to an anchor
- Anchor Navigation Speed — The speed at which the page content scrolls when an anchor inside the panel is clicked
The offcanvas can be triggered using the default options that let you create a button, a text link, an icon or all of the three. This is how the settings for the Trigger look like:
The “Burger” option gives you an animated burger icon with text as a trigger to open your offcanvas. These are the settings available for the burger icon trigger:
- Position — Inline or Floating.
- IMPORTANT: We don’t recommend using the Floating option, which was introduced before Elementor released Custom Positioning controls. Instead, set the Advanced > Custom Positioning > Position control to Fixed to have the trigger fixed on the screen. This does the same as Floating, but you can take advantage of the advanced positioning controls for Elementor and place it anywhere on the page instead of the strict Placement control the widget offers.
- Label — The text next to the burger icon
- Show — Hides or shows the label
- Text — The text to display
- Icon — The burger icon
- Position — relative to the label. Can be “Hide“, which hides the icon completely, “Before Label” or “After Label“.
- Animation — A number of animation options for the burger icon
- Distance — The space between the icon and the label
The “Element ID” and “Element Class” are explained below.
You can have any element act as the trigger for opening the off-canvas panel. Under Content > Trigger > Source, select Element ID if you want to target an element by it’s ID, or Element Class if you want to target it by a class. If you choose Element Class, all elements with that class will trigger the off-canvas panel when clicked.
We’ll explain, step by step, how to make a Button widget with the ID ‘offcanvas-trigger‘ act as a trigger for opening the panel:
- Select your Button widget
- Under Content > Button ID type in offcanvas-trigger. Your button how has this ID.
- Select your Offcanvas widget
- For Content > Trigger > Source select Element ID.
- An option Trigger CSS ID appears below. Enter offcanvas-trigger as the value for that control.
- Click your Button widget and your offcanvas will open.
The example above is using Element ID as a selector for the trigger source. If you want to use Element Class instead, go to your Buttons’ Advanced tab and under Advanced > CSS Classes, enter your offcanvas-trigger class.
The off-canvas panel can have different kind of content inside it. This content is handled by a repeater field so that you can select add multiple different kinds of content without having to save them into one template. For example, you can add custom content form a WYSWIG field and another template right underneath. Mixing types of content inside the panel gives you a lot of flexibility.
There are three types of content available:
- Text — this lets you add content using a WYSWIG field.
- Template — Give you access to your Elementor saved templates (sections, pages and widgets) that you can insert in the panel
- WordPress Sidebar — Add a saved WordPress Sidebar inside the panel. These are created in Appearance > Widgets in your WordPress dashboard.
Because this widgets wraps the whole content of your page with a new container div, the background of the page needs to become the background of this wrapper. Otherwise, by default, opening the off-canvas panel will results in visual errors when Reveal is set for the Animation option. The default color for the Offcanvas wrapper background is white.
If you wish to change the background of the page / wrapper, you can do so in the Elementor Global Settings in the editor panel on the left (gear icon on top left), under Extras Settings > Style > Offcanvas > Page > Container Background Color.
Can I have the trigger be always visible on top of the overlay?
Most likely yes, but it depends on the z-indexes you are using. We suggest going to the top-most section that contains your trigger or offcanvas widget (in case the trigger Source control is set to “Burger“) and setting that section’s Z-index control to a value that is higher than 998 (which is the z-index of the page overlay).
Can I have the trigger fixed on the page, outside the panel and page content?
Unfortunately, no. Because the whole page is wrapped in the container and because all Elementor elements are within the page, this is impossible. Moreover, the page uses CSS transform, which means that even if you set the position to fixed, it will become fixed relative to the page content.
The content inside the off-canvas panel is hidden, not shown entirely or simply messed up
If that’s the case, if you’re using an Elementor template as a content box, please check to see if inside the content of the panel there is no section that has the Stretch option enabled. Dynamically stretched content should not exist since the position and properties of the panel change when the off-canvas is opened and closed.