Are you looking to add an off canvas mobile menu in Elementor? An off canvas menu slides in from the side of the screen when triggered, keeping your navigation compact and out of the way on smaller devices without reducing the available screen space for content.
With the Navigation Menu widget in The Plus Addons for Elementor, you can configure an off canvas menu specifically for mobile devices directly in the Elementor editor, without a separate menu plugin.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.
Best Used For:
- Mobile-first websites where header navigation space is limited and a slide-out menu improves the user experience
- Multi-page business sites where the primary navigation has five or more links that cannot fit in a compact mobile header
- Portfolio and agency sites that use the header area for branding and need navigation tucked into an off canvas panel
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
To do this, add the Navigation Menu widget to the header template and follow the steps –
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. In the Layout and Content tabs, select the appropriate Menu Type, Menu Direction, and menu. These settings control the desktop navigation layout and determine which WordPress menu is used as the source.
2. Go to the Mobile Menu tab and enable the Responsive Mobile Menu toggle. This activates the mobile-specific menu settings and separates mobile navigation behavior from the desktop layout.
3. From the Menu Type dropdown, select Off Canvas. This sets the mobile menu to slide in as an off canvas panel when the visitor taps the menu trigger button.
From the Custom Width section, set the width of the off canvas panel. Use a narrower value (240px to 300px) for a minimal mobile menu, or a wider value for menus with icons or multi-column content.
In the Open Mobile Menu section, specify the minimum viewport width at which the mobile menu activates. Visitors on screens wider than this value will see the desktop navigation instead.
From the Navigation Alignment section, control the alignment of the off canvas menu items. Left alignment is standard for most designs, while centered alignment works well on minimal single-column mobile menus.
For a slide-over panel menu triggered by a button click rather than a viewport breakpoint, see how to create an off canvas popup menu in Elementor using The Plus Addons for Elementor.
Must read, 8 best mega menu examples + learn how to create them.
4. From the Menu Content dropdown, select the menu content type. There are two options –
Normal Menu – To use a WordPress default menu as the mobile menu content.
Template Menu – To use an Elementor template as the mobile menu content. Use this when your mobile menu needs custom layouts, images, or styled elements that go beyond a standard list.
For this walkthrough, select Normal Menu.
5. From the Select Menu dropdown, select the WordPress menu you want to use as the mobile navigation.
For a permanently visible sidebar navigation that sits alongside page content in Elementor, see how to create a side menu in Elementor.
When you click the toggle button on mobile, the off canvas menu slides into view from the side of the screen.
Also, learn how to create an off-canvas mobile menu in Elementor for a modern touch to your site’s navigation.
Also, read how to create a hamburger mobile menu with Elementor template.
