--- 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-02 lang: en author: "Aditya Sharma" description: "For a mobile friendly website, an essential element is the toggle menu, which allows users to navigate through different sections of the website. With the Navigation Menu widget from The..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Toggle-Menu-for-Mobile-in-Elementor_-1024x536.jpg word_count: 917 --- # 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. For a mobile friendly website, an essential element is the toggle menu, which allows users to navigate through different sections of the website. With the Navigation Menu widget from The Plus Addons for Elementor, you can add a toggle button for the mobile menu directly in the Elementor editor. *To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](/docs/navigation-menu-widget-settings-overview/).* ***Requirement – This widget is a part of The Plus Addons for Elementor, make sure its 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 ## What It Does The Navigation Menu widget's **Mobile Menu** tab adds a compact toggle button that opens a dropdown panel of menu items on smaller screens, replacing the full desktop navigation when there is not enough width to show it. ## Why It Matters Most site traffic today lands on mobile first. A navigation bar that simply shrinks or wraps on small screens breaks the layout and hides links below the fold. A dedicated toggle menu keeps the header clean and puts every navigation item one tap away, without any custom code. ## What You Get - A **Menu Type: Toggle** option on the Mobile Menu tab, one of three mobile menu behaviors the widget supports - Five built-in **Toggle Style** presets, plus custom icon or custom image options - Independent **Toggle Alignment** and **Navigation Alignment** controls so the button and the opened menu items can sit differently - A choice between a standard WordPress menu (**Normal Menu**) or an Elementor template (**Template Menu**) as the panel content ## Benefits - Ships with the widget – no separate mobile-menu plugin or hand-written media queries needed - The breakpoint that switches from desktop to mobile menu is a value you set yourself, not a fixed theme default - Same widget handles both the desktop menu and the mobile toggle, so there is only one place to manage navigation content ## Capabilities This sits on the Navigation Menu widget's **Mobile Menu** tab, behind the **Responsive Mobile Menu** toggle. Setting **Menu Type** to **Toggle** unlocks the **Toggle Style**, **Toggle Alignment**, and (for a Normal Menu source) **Navigation Alignment** controls, plus the **Open Mobile Menu** breakpoint width. ## How It Works Add the Navigation Menu widget to the header template and follow the steps below. > *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.* ## How to Use It 1. From the **Layout** and **Content** tabs, select the appropriate **Menu Type**, **Menu Direction** and menu. 2. Then go to the **Mobile Menu** tab and enable the **Responsive Mobile Menu** toggle. 3. From the **Menu Type** dropdown, select **Toggle**. In the **Open Mobile Menu** section, you can specify the minimum width for enabling the mobile menu. From the **Toggle Style** dropdown, you can select different toggle styles or can use a custom icon or image as the toggle button. From the **Toggle Alignment** section, you can align the toggle button. Also read, [how to create a vertical menu in Elementor.](https://theplusaddons.com/docs/create-a-vertical-menu-in-elementor/) From the **Navigation Alignment** section, you can align the mobile menu items. This control only appears when **Menu Content** is set to **Normal Menu**. 4. Then, from the **Menu Content** dropdown, you can select the menu content type. Here you'll find two options –  - **Normal Menu** – To use a WordPress default menu as a mobile menu. - **Template Menu** – To use an Elementor template as a mobile menu. Let's select the **Normal Menu** here. 5. From the **Select Menu** dropdown, you have to select your menu. Configuring the Toggle mobile menu type, style, and alignment in the Navigation Menu widget Now, you'll see a toggle button to open the menu on mobile. The finished Toggle mobile menu opening on a mobile viewport ## Use Cases - Any site with a header that needs a collapsed hamburger or toggle menu on mobile devices - E-commerce and blog sites where mobile navigation must not interfere with above-the-fold content - Membership or multi-page sites where different mobile menu content (template vs. standard menu) is required ## Limitations - **Navigation Alignment** only applies when **Menu Content** is Normal Menu – it has no effect on a Template Menu, since the template controls its own internal layout - Toggle Style 5 (custom icon/image) requires you to upload your own asset; there is no built-in icon library shortcut for it inside this control - The **Open Mobile Menu** breakpoint is a single global value for the widget instance – you cannot set different breakpoints per device tier (phone vs. tablet) from this control alone ## Troubleshooting - **Toggle button does nothing on tap/click** – a real support case (ticket #3106) reported the mobile toggle not opening the menu, traced to a JavaScript conflict with another script. Check the browser console for errors and disable other menu/animation plugins one at a time to isolate the conflict. - **Desktop menu shows on mobile (or vice versa) inconsistently across pages** – a real support case (ticket #15238) reported the widget flipping between desktop and mobile display on different pages using the same header. This is almost always stale page/CDN cache after changing the Mobile Menu settings – clear all caching layers and hard-refresh. - **Breakpoint set in Open Mobile Menu does not match where the switch actually happens** – source-verified: confirm no theme or global CSS media query is also targeting the header at a different width, since the widget's own breakpoint can be overridden by a more specific external rule. Also, read [how to create an off canvas mobile menu in Elementor](https://theplusaddons.com/docs/create-an-off-canvas-mobile-menu-in-elementor/).