Widgets & Extensions

Offcanvas

General

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.

Why use Offcanvas?

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.

  1. 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.
  2. Any content — Enter content from a WYSWIG editor or select any Elementor template you want
  3. Four transitions — Reveal, Push, Overlay, Shift – with a duration option
  4. Anchor Navigation — The widget recognises anchor links and handles them accordingly.
  5. Custom selector for closing the offcanvas using any selector from inside the content of the offcanvas.

Settings

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.

The general settings for the Offcanvas widget.
  • 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

Trigger

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:

You can choose a burger icon or to enter a selector that can be an ID or class for the element which you want use as the trigger that opens the popup.

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.

Adjust the default title

The offcanvas panel has a prebuilt header with a title and a close icon. The title can hidden altogether or customised using these settings:

  • Content > Title
    • Show — Hide or show the default title of the offcanvas panel
    • Title — The title text
    • Title HTML Tag — The HTML tag to be used for the title

Settings for the close button

The widget also comes with a close icon built into the offcanvas panel. This can be replaced by your own custom close icon or button within the content of the panel or, if the Elementor template you’re displaying.

  • Content > Close
    • Source — Where the close comes from
      • Default — The built in close icon shown next to the Title.
      • Element ID — An element with a specific ID within the content of the panel or the template used for the content
      • Element Class — An element with a specific class within the content of the panel or the template used for the content. If you have multiple elements with the same class, clicking on any element will close the offcanvas
    • Position — Available only of Source is set to Default. The position of the close icon relative to the built in title of the offcanvas panel
    • Close CSS ID — Available only of Source is set to Element ID. The selector, without the # (pound character) in front, for the element found within the panel content to close the offcanvas panel when clicked.
    • Close CSS Class — Available only of Source is set to Element Class. The selector, without the . (dot character) in front, for the element(s) found within the panel content to close the offcanvas panel when clicked.

Setting a custom trigger

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:

  1. Select your Button widget
  2. Under Content > Button ID type in offcanvas-trigger. Your button how has this ID.
  3. Select your Offcanvas widget
  4. For Content > Trigger > Source select Element ID.
  5. An option Trigger CSS ID appears below. Enter offcanvas-trigger as the value for that control.
  6. 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.

Content Boxes

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.

Example showing three content boxes, each of a different type of content.

There are three types of content available:

  1. Text — this lets you add content using a WYSWIG field.
  2. Template — Give you access to your Elementor saved templates (sections, pages and widgets) that you can insert in the panel
  3. WordPress Sidebar — Add a saved WordPress Sidebar inside the panel. These are created in Appearance > Widgets in your WordPress dashboard.

Fixing the page jump issue

When the Offcanvas panel opens, the page scroll functionality dissapears. Because of the this, some browsers hide the scrollbar, resulting in a horizontal page jump. We’ve implemented two hacks to fix this under the Content > Settings > Scroll Fix option, but each have their drawbacks. “Margin Hack” adds “margin-left: calc(100vw – 100%);” to the html element but fixed elements still jump on the page. “Overflow Fix” sets the horizontal overflow to scroll to always show the scrollbar placeholder, leaving a margin to the right of the page and, if you set the Allow Page Scroll option to Yes you will get two scrollbars (one for the page and one for the page content on which we set overflow-y to scroll. Choose the one that fits your needs by simply testing both.

Frequently Asked Questions

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.