Off-canvas menu refers to a behavior where the menu appears on the side — be it the right side or the left side — of a website instead of the top. The menu will appear after a user clicks a button, icon, or text. Here is an example.
Elementor has no native widget that allows you to create an off-canvas menu but it doesn’t mean you can’t create one. If you use Elementor Pro, you can create an off-canvas menu using Elementor’s popup builder. Alternatively, you can use JetMenu.
JetMenu is a premium Elementor add-on from Crocoblock (costing $24 per year). It is part of JetPlugins. JetMenu is designed to allow you to create a mega menu in Elementor, but you can also use it to create an off-canvas menu. JetMenu comes with three menu widgets as follows:
- Mega Menu
- Vertical Mega Menu
- Hamburger Menu
The widget that you can use to create an off-canvas menu is the Hamburger Menu widget.
How to create an off-canvas menu with JetMenu.
Before getting started, make sure you have installed and activated JetMenu on your WordPress site. You can get JetMenu on the official website of Crocoblock. Alternatively, you can also get JetMenu with a one-time purchase in the Jupiter X theme bundle.
You can use JetMenu on both Elementor Pro and Elementor Free. If you use Elementor Free, you will need an extra add-on to create a custom header as Elementor Free has no feature to create a custom header (unless you want to add your menu on another area outside the header). Read the differences between Elementor Pro vs Elementor Free.
If you have no idea how to create a custom header in Elementor, you can read our previous article to learn how to create a custom header with Elementor. In this article, we will go straight to creating the off-canvas menu.
First off, edit your custom header template with Elementor. On the Elementor editor, add the Hamburger Menu widget to the header section.
Once the Hamburger Menu widget is added, go to the left panel. On the Options block under the Content tab, select a menu you want to use. You can use a different menu for desktop and mobile. On the Layout option, set it to Slide Out. Set the toggle position and menu container position as well.
Still on the Options block, you can add a template in case you want to add extra content to your menu. You can add any content you like such as contact form, map, blog posts, and so on. You can prepare the templates first before adding ones. You can add a template on the header area, before the menu items, and after the menu items. Simply select a template you want to use from the dropdown menus.
Here is the example.
After selecting the templates, you can also set additional settings like disable/enable the menu item icons, item badges, and so on. You can go to Appearance -> Menu to add menu icons and badges. Read our previous post to learn more.
Next, open the Content block if you want to use a custom icons for each menu component. We use default icons in this example.
Styling up the off-canvas menu
Once done making the necessary settings on the Content tab, you can switch to the Style tab to style up your off-canvas menu. There are 4 styling option blocks you can open.
Toggle
You can open this block to style up the toggle icon. You can set the color of the toggle icon, the size of the toggle icon, the background color of the toggle icon, border-radius of of the toggle, and so on.
Container
You can open this block to set the container width, container background color, the color of the close icon, the padding of the navigation controls, the padding of the templates, and so on.
Items
You can open this block to style up the menu items, icons, and badges. You can set the typography (font family, font size, font style) of the menu items, padding of the menu item, size of the menu item icons, the typography of the menu badges, sub-menu button, and so on.
Advanced
You can open this block to the set the color of the menu loader and cover.
Publish/update your header template once you are done styling up the off-canvas menu.