Are you looking to add an off canvas mobile menu in Elementor? An off canvas menu slides in from the edge of the screen when visitors tap the menu button, and covers the page instead of pushing it down.
With the Navigation Menu widget from The Plus Addons for Elementor, it is one of three mobile menu types.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free Navigation Menu Lite widget does not have this option.
- Widget to enable: Navigation Menu, switched on under The Plus Addons > Widgets.
- A header template. Add the widget to your site’s header so the menu shows on every page. Build the header with the free Nexter Builder or with Elementor Pro’s Theme Builder.
- A WordPress menu under Appearance > Menus, if you use the Default menu type.
Steps
- Set up the desktop menu in Layout and Content.
- In Content > Mobile Menu, keep Responsive Mobile Menu on and set Menu Type to Off Canvas.
- Set Custom Width for the panel (up to 750px). 280–320px suits most phones.
- Set Open Mobile Menu. Open Mobile Menu (default 991px) is the widest screen that gets the mobile menu. At that width and narrower, visitors see the mobile menu; wider screens get the normal menu.
- Keep Menu Content on Normal Menu, pick the menu in Select Menu, and line the items up with Navigation Alignment.
When visitors tap the menu button, the panel slides in from the left edge of the screen. The “×” at the top closes it.
In the mobile menu, tapping an item that has a submenu opens the submenu instead of following that item’s link. If the parent page matters, add it to its own submenu too.
Limitations
- Pro only. Navigation Menu Lite only has a toggle mobile menu.
- No Template Menu. The Elementor Templates picker is hidden for Off Canvas. For a designed mobile menu, use the Toggle type with a template.
- The button is always the standard three lines. Toggle Style and Toggle Alignment only apply to the Toggle type.
- The close button uses Font Awesome 5. If nothing on the page loads Font Awesome, the “×” does not show. Make sure Font Awesome loads on your site.
- Mobile Click Close Menu only closes the panel when visitors tap the header area, not the rest of the page.
Troubleshooting
The panel opens but I can’t see how to close it
Font Awesome is not loaded on the page, so the close icon is blank. It is still there at the top right of the panel — loading Font Awesome makes it visible.
The panel is empty
Pick a menu in Mobile Menu > Select Menu, and check the menu has items.
The panel is cut off at the bottom
A parent container in the header has a fixed height or hides overflow. Remove it. If the header is sticky, turn on Style > Sticky Mobile Menu > Scroll Overflow.
