A toggle menu hides your navigation behind a button on phones and tablets. Visitors tap the button and the menu drops down, so your header stays clean on small screens.
With the Navigation Menu widget from The Plus Addons for Elementor, the toggle menu is built in — it is the default mobile menu.
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 plugin has a simpler widget, Navigation Menu Lite, which also has 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.
Step 1: Set up the desktop menu
In Layout and Content, choose the Menu Type, Menu Direction and menu.
Step 2: Turn on the mobile menu
In Content > Mobile Menu, check that Responsive Mobile Menu is on (it is by default) and Menu Type is Toggle.
Step 3: Set the breakpoint
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. For example, 767px keeps the desktop menu on tablets.
Step 4: Style the toggle button
Toggle Style offers Style 1 to Style 4, or Custom. Custom lets you use an Icon or an Image, with separate ones for open and close. Toggle Alignment moves the button left, centre or right (right by default).
Step 5: Choose what the menu shows
Menu Content has two options:
- Normal Menu — a WordPress menu, picked in Select Menu. Navigation Alignment lines its items up left, centre or right.
- Template Menu — an Elementor template. See how to use a template as the mobile menu.
Now you’ll see a toggle button that opens the menu on mobile.
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
- One breakpoint. Open Mobile Menu is a single width, not one per device.
- Mobile Click Close Menu (on by default) only closes the menu when visitors tap the header around the button, not the page content. Tapping the button again always closes it.
- The submenu arrows use Font Awesome 5. If nothing on the page loads Font Awesome, they show as small empty boxes.
Troubleshooting
The button does nothing
Look in the browser console for JavaScript errors from another plugin, and clear any JavaScript optimisation or cache.
The desktop menu shows on some pages and the mobile menu on others
You are seeing an old cached copy of the header. Clear the page, CDN and Elementor CSS caches after changing mobile settings.
The menu switches at the wrong width
Check Open Mobile Menu, and that no theme or custom CSS hides the header at another width.
