A hamburger toggle collapses a full navigation bar into one small button, so a phone header stays clean and every link is still one tap away.
The free Navigation Menu Lite widget in The Plus Addons for Elementor has this built in, with a breakpoint you choose, alignment controls, and a choice between a WordPress menu and an Elementor template inside the panel.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu Lite 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: Free — Navigation Menu Lite is part of the free The Plus Addons for Elementor plugin. Every setting described here, including Menu Content > Template Menu, works without the Pro plugin; this was checked with Pro deactivated.
- Not the same widget as Navigation Menu: Navigation Menu is a separate widget in The Plus Addons for Elementor Pro. It is the one with mega menus, a sticky header menu, off-canvas and swiper mobile menus and per-item icons and labels. Navigation Menu Lite has none of those. If the panel header says Edit Navigation Menu Lite, this is the free widget. The LIVE WIDGET button above opens the Pro Navigation Menu demo, since the Lite widget has no demo page of its own.
- Widget to enable: TP Navigation Menu Lite, switched on under The Plus Addons > Widgets. In the Elementor panel it appears as Navigation Menu Lite.
- You need a WordPress menu: build it first under Appearance > Menus. The widget does not hold menu items of its own, it renders a menu you have already created. On a block theme (such as Twenty Twenty-Five) WordPress hides Appearance > Menus; open /wp-admin/nav-menus.php directly, or use a classic theme, or build the menu in the Site Editor instead.
Steps
- In the Navigation Bar section, pick a Menu Direction and choose your desktop menu in Select Menu.
- Open the Mobile Menu section. Responsive Mobile Menu is already set to Show on a new widget; leave it on.
- Set Open Mobile Menu. This is the widest screen that still gets the hamburger. At the default 991 px the toggle appears at 991 px and below, and the full bar returns at 992 px.
- Set Toggle Alignment for the button itself (it defaults to Right, opposite a logo) and Mobile Navigation Alignment for the links inside the open panel.
- Leave Menu Content on Normal Menu, then choose a menu in the Select Menu that appears just below it. This is a second, separate setting from the desktop one.
If you skip step 5 the hamburger still appears, because Responsive Mobile Menu is on by default — but it opens an empty panel. The desktop Select Menu does not fill in the mobile one.
- Update the page and open it on a phone, or narrow the browser below your breakpoint. The bar is replaced by the toggle, and tapping it slides the menu open.
Put an Elementor Template in the Panel Instead
Set Menu Content to Template Menu and pick a saved template in Elementor Templates. The panel then renders that template instead of a link list, so you can add a call-to-action button, opening hours, a search field or a phone number. This works on the free plugin — it was checked with the Pro plugin deactivated.
Settings Used Here
| Setting | What it does | Default |
|---|---|---|
| Responsive Mobile Menu | Turns the whole mobile menu on or off. | Show |
| Open Mobile Menu | The widest screen that gets the hamburger, in pixels. Range 0–1500. | 991 px |
| Toggle Alignment | Left, centre or right for the toggle button. | Right |
| Mobile Navigation Alignment | How the links line up once the panel is open. | Left |
| Menu Content | Normal Menu for a WordPress menu, Template Menu for an Elementor template. | Normal Menu |
| Select Menu (Mobile Menu section) | The menu shown in the panel. Separate from the desktop one. | none |
| Toggle Height / Toggle Bottom Space | Size of the toggle and the gap between it and the open panel (Style tab). | — |
How It Behaves
- Open Mobile Menu is a maximum and it includes the value you type. Set it to 768 and the hamburger shows at 768 px and below; the bar returns at 769 px.
- The toggle is two short lines and its shape is fixed. The Style tab changes its height, spacing and colour, but the widget has no control for swapping the icon or replacing it with a text label.
- Tapping the toggle slides the panel open below it; tapping again slides it shut. Parent items inside the panel expand their children on tap, whatever Menu Hover/Click is set to.
- The open panel stretches to the full width of the browser window even when the widget sits inside a narrower container.
Limitations
- One breakpoint for the whole widget. There is no separate phone and tablet value.
- No slide-in or full-screen overlay. The panel always drops down under the toggle. For a panel that slides in from the edge, see the off-canvas popup menu.
- No control over the toggle icon itself, and no text-label variant.
- Padding and corner radius of the open panel are not exposed as controls; that needs custom CSS.
- If you set Open Mobile Menu below 991 px, desktop dropdown submenus stop opening between your value and 991 px — see Troubleshooting.
Troubleshooting
The hamburger opens an empty panel
The Select Menu inside the Mobile Menu section is still empty. It is a separate setting from the desktop one, and it has no default. Choose a menu there.
The menu switches at the wrong width
Remember the value is a maximum, not a minimum: 768 means “768 px and narrower”. If the switch still happens somewhere else, a theme or global CSS media query is hiding the header at its own breakpoint; check the theme’s own responsive settings.
Submenus stopped working on tablets after I lowered the breakpoint
Desktop dropdowns only run above 991 px of browser width, and that number is fixed in the widget rather than taken from Open Mobile Menu. Between your lowered value and 991 px the bar is shown but no dropdown opens. Keep Open Mobile Menu at 991 or higher.
The panel opens and closes again by itself
Another script is handling the same tap. Disable other menu, popup or animation plugins one at a time to find it, and clear every cache layer between tests.
Nothing changed after I edited the settings
Clear the page cache, the browser cache and any CDN cache, then hard-refresh. Elementor also writes per-page CSS, so regenerating Elementor’s files under Elementor > Tools is worth trying.
