---
title: "How to Create an Elementor Hamburger Toggle Menu for Mobile for Free?"
url: https://theplusaddons.com/docs/create-an-elementor-hamburger-toggle-menu-for-mobile-for-free/
date: 2023-10-27
modified: 2026-09-16
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-an-Elementor-Hamburger-Toggle-Menu-for-Mobile-for-Free_-1024x536.jpg
word_count: 1109
---

# How to Create an Elementor Hamburger Toggle Menu for Mobile for Free?

## 

- Navigation Menu Lite en The Plus Addons for Elementor es un widget gratuito que incluye un breakpoint elegido por el usuario, controles de alineación y la opción de usar un menú de WordPress o una plantilla de Elementor dentro del panel.
- Open Mobile Menu funciona como un máximo: con el valor predeterminado de 991 px, el icono hamburguesa aparece en 991 px y por debajo, y la barra completa vuelve en 992 px.
- Menu Content permite cambiar a Template Menu y mostrar una plantilla guardada de Elementor Templates, con contenido como un botón de llamada a la acción, opening hours, un campo de búsqueda o un número de teléfono.
- The Plus Addons for Elementor Navigation Menu Lite separa el menú móvil del menú de escritorio: si no se elige Select Menu en la sección Mobile Menu, el icono hamburguesa sigue apareciendo pero abre un panel vacío.

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](https://theplusaddons.com/docs/navigation-menu-lite-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## 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.

![The Mobile Menu section of Navigation Menu Lite with Responsive Mobile Menu set to Show and Open Mobile Menu at 991](https://theplusaddons.com/wp-content/uploads/2026/09/navmenulite-mobile-menu.webp)

- 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.

![The Select Menu control inside the Mobile Menu section, set to Main Menu](https://theplusaddons.com/wp-content/uploads/2026/09/navmenulite-mobile-select-menu.webp)

> *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.

![A 390 pixel wide page with the menu open under the toggle, listing Home, Services, Shop, About and Contact](https://theplusaddons.com/wp-content/uploads/2026/09/navmenulite-result-hamburger.webp)

![The hamburger toggle opening and closing the mobile menu](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-mobile-toggle-menu-demo.gif)

## 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.

![The mobile panel showing an Elementor template with a Menu heading, five links, a Book a free call button and contact details](https://theplusaddons.com/wp-content/uploads/2026/09/navmenulite-result-template-menu.webp)

## 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](https://theplusaddons.com/docs/off-canvas-popup-menu-in-elementor/).- 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.

## Related Docs

- [Navigation Menu Lite Widget Settings Overview](https://theplusaddons.com/docs/navigation-menu-lite-widget-settings-overview/)- [Mobile Menu Widget Settings Overview](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/)- [How to Add an Off-Canvas Popup Menu in Elementor?](https://theplusaddons.com/docs/off-canvas-popup-menu-in-elementor/)- [How to Create a Vertical Navigation Menu in Elementor for Free?](https://theplusaddons.com/docs/create-a-vertical-navigation-menu-in-elementor-for-free/)

## Frequently Asked Questions

**Q: Why does the hamburger menu open an empty panel?**
A: That usually means the mobile panel has no menu assigned. The mobile menu uses its own Select Menu field, separate from the desktop menu, and it has no default value. The fix is to choose a menu in the Mobile Menu section, or switch Menu Content to Template Menu if you want a saved Elementor template inside the panel. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH built this as a separate mobile setting so the desktop menu does not automatically fill the panel.

**Q: What do I need before creating a hamburger toggle menu in Elementor?**
A: A WordPress menu has to exist first, because Navigation Menu Lite renders a menu you already created instead of storing items itself. The widget also needs TP Navigation Menu Lite enabled under The Plus Addons > Widgets, and The Plus Addons for Elementor must be installed and activated. On block themes like Twenty Twenty-Five, WordPress hides Appearance > Menus, so you may need to open /wp-admin/nav-menus.php directly or build the menu in the Site Editor.

**Q: Can I put an Elementor template inside the mobile menu panel?**
A: The mobile panel can render a saved Elementor template instead of a link list by setting Menu Content to Template Menu. That is useful when the panel needs more than navigation, such as a call-to-action button, opening hours, a search field, or a phone number. This works in the free plugin too, and it was checked with the Pro plugin deactivated. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH supports that template-based panel content without requiring Pro.

**Q: What is the best breakpoint for switching to the hamburger menu on mobile?**
A: Open Mobile Menu is a maximum width, not a minimum. At 991 px, the hamburger appears at 991 px and below, and the full bar returns at 992 px. That matters because lowering it too far can break desktop dropdown behavior on tablets. If you want predictable behavior across devices, keeping Open Mobile Menu at 991 or higher avoids the gap where the bar shows but desktop dropdowns stop opening.

**Q: Why did submenu dropdowns stop working on tablets after I lowered the breakpoint?**
A: Desktop dropdowns only run above 991 px of browser width, and that threshold is fixed in the widget rather than tied to Open Mobile Menu. If you lower Open Mobile Menu below 991 px, there is a range where the bar still shows but no desktop dropdown opens. The practical fix is to keep Open Mobile Menu at 991 or higher so tablet widths do not fall into that dead zone.

**Q: How do I stop the mobile menu from opening and closing by itself?**
A: That behavior usually means another script is handling the same tap event. The page recommends disabling other menu, popup, or animation plugins one at a time to isolate the conflict, then clearing every cache layer between tests. If nothing changes after editing settings, Elementor also writes per-page CSS, so regenerating files under Elementor > Tools is worth trying after you clear page cache, browser cache, and CDN cache.