Elementor is the most popular WordPress page builder plugin. Not only because it has a very intuitive interface, but it also has the most comprehensive features compared to other page builder plugins. With Elementor (the pro version), you can create a custom header for your WordPress site without coding. You can add any element to your custom header, including a navigation menu. Speaking of menu, Elementor allows you to create several menu types, including a full-screen menu and an off-canvas menu. This article will show you how to create an off-canvas menu in Elementor.

Elementor itself has no default widget or feature to create an off-canvas menu. To create an off-canvas menu, you can make use of the pop builder feature offered by Elementor Pro (read: Elementor Free vs Elementor Pro). Alternatively, you can also use an add-on for a more practical way. Some premium Elementor add-ons like Essential Addons and JetMenu come with a widget to create an off-canvas menu.

1. How to create an off-canvas menu in Elementor using the popup builder

Before getting started, make sure you have upgraded your Elementor to the pro version if you haven’t done so since the popup builder is not available on Elementor Free. You need the popup builder to create the content of your off-canvas menu.

Creating the menu content

Assuming you have upgraded your Elementor to the pro version, go to Templates -> Popups on your WordPress dashboard. Click the Add New button to create a new popup.

Give your popup a name and click the CREATE TEMPLATE button.

We will create the popup from scratch so you can close the appearing Elementor templates library. Before adding any content, set the popup layout first. To do so, open the Popup Settings panel by clicking the gear icon on the bottom-left corner.

Set the width accordingly (i.e. 450px). For the height, you can set it to Fit To Screen. Set the horizontal position to left or light according to where you want your off-canvas menu to appear. If you want to disable the overlay and the close button, simply toggle the respective button. You can also set the entrance and exit animations from this panel.

Switch to the Style tab to set the popup background, border radius, box shadow, overlay, and close button.

Next, you can start adding the content to your popup. You can add any content you like. From navigation menu, blog posts, contact form, WooCommerce products. Anything. Simply drag the Elementor widgets to the canvas area. You can read this guide if you are completely new to Elementor.

Once you are adding and editing the content, click the PUBLISH button.

You will be asked to set the display condition. Simply click the ADD CONDITION button to add one.

By default, your popup is set to appear on the entire website. Since you will use this popup as an off-canvas menu, setting your popup to appear on the entire website is the best idea. Click the NEXT button to set the trigger type. Enable the On Click option and click the SAVE & CLOSE link.

Your popup is ready to use.

Editing the header

After creating the popup, you can then create a custom header with Elementor. If you have no idea yet how to create a custom header with Elementor, you can read this guide. In this article, we will edit the existing custom header.

Go to Templates -> Theme Builder on your WordPress dashboard. Go to the Header tab and select the header you want to edit. Click the Edit with Elementor link to edit the header with Elementor.

Add a widget that is possible to add a link such as the Button widget, the Heading widget, the Text widget, or the Icon widget. We use the Icon widget in this example.

Go to the left panel to set the link. Instead of pasting a URL, you can click the database icon and select Popup.

Click the wrench icon on the link field and select the popup you have just created.

Click the UPDATE button to update your header.

2. How to create an off-canvas menu in Elementor using an add-on

There are several add-ons you can use to create an off-canvas menu in Elementor. In this example, we will use JetMenu. JetMenu is an Elementor add-on designed specifically to create an advanced menu in Elementor. You can use it to create a mega menu and an off-canvas menu. JetMenu is a paid add-on. You can get it at $24 per year. You can use JetMenu on Elementor Free, but you will need an additional add-on to create a custom header. So, we will use JetMenu on Elementor Pro in this example.

Start by editing your custom header as we showed you above. Once the Elementor editor opens, add the Hamburger Menu to the header.

Go to the left panel and open the Options block under the Content tab. Select a menu you want to use on the dropdown menu on Select Menu. Also set the toggle position, layout (set the layout to Slide Out,) and menu container position.

You can add the content to your menu via a template (you can create the template first before adding it to the menu). In JetMenu, the content area of the off-canvas menu is divided into four sections: header, before menu items, menu items, and after menu items.

To add content to the header section, before items section, and after items section, you need to create three Elementor templates (as you can see on the image above). Once your templates are ready, you can simply select them from the dropdown menus as shown below.

Once done adding the templates, you can make additional settings such as disable/enable the menu icons, disable/enable the menu badges, and so on. You can go to Appearance -> Menu on your WordPress dashboard to ad menu icons and badges.

Styling up the off-canvas menu

To style up the menu, you can go to the Style tab. There are 4 styling option blocks you can open: Toggle, Container, Items, and Advanced. Simply open each block to style up each menu component.

Once done styling up the menu, you can click the UPDATE button to apply the new changes you made. Or, if you create a new header template, you can simply click the PUBLISH button to publish it.

Bottom line

It’s true that Elementor has no default widget or feature to create an off-canvas menu. But it doesn’t mean you can’t create one. With a little trick and creativity, you can use the Elementor popup builder to create an off-canvas menu. Alternatively, you can also use an add-on for an easier way.