--- title: "How to Create a Toggle Menu for Mobile in Elementor?" url: https://theplusaddons.com/docs/create-a-toggle-menu-for-mobile-in-elementor/ date: 2023-10-27 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "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...." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Toggle-Menu-for-Mobile-in-Elementor_-1024x536.jpg word_count: 581 --- # How to Create a Toggle Menu for Mobile in Elementor? ## - The Navigation Menu widget from The Plus Addons for Elementor adds a Mobile Menu tab with a Toggle option that opens a dropdown panel on smaller screens. - The widget offers five built-in Toggle Style presets, plus custom icon or custom image options, and separate Toggle Alignment and Navigation Alignment controls. - The Open Mobile Menu breakpoint is set by the user, not by a fixed theme default, and the same widget manages both the desktop menu and the mobile toggle. - The post notes two menu content choices, Normal Menu and Template Menu, and says Navigation Alignment applies only when Menu Content is Normal Menu. 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](https://theplusaddons.com/docs/navigation-menu-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:** **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](https://nexterwp.com/docs/nexter-theme-builder-explained/) 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. ![Open Mobile Menu set to 991px in the Mobile Menu section](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-open-mobile-menu.webp) ## 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). ![The Toggle Style dropdown](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-toggle-style.webp) ## 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](https://theplusaddons.com/docs/create-a-hamburger-mobile-menu-with-elementor-template/). Now you’ll see a toggle button that opens the menu on mobile. ![The toggle menu open on a phone, with the Services submenu expanded](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-result-toggle.webp) 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. ## Related Docs - [Create an off canvas mobile menu](https://theplusaddons.com/docs/create-an-off-canvas-mobile-menu-in-elementor/)- [Create a swiper menu for mobile](https://theplusaddons.com/docs/create-a-swiper-menu-for-mobile-in-elementor/)- [Use an Elementor template as the mobile menu](https://theplusaddons.com/docs/create-a-hamburger-mobile-menu-with-elementor-template/)