--- title: "How to Create a Hamburger Mobile Menu with Elementor Template?" url: https://theplusaddons.com/docs/create-a-hamburger-mobile-menu-with-elementor-template/ date: 2023-10-27 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "Do you want a mobile menu that looks exactly like your brand? Instead of a plain list of links, you can design the whole mobile menu in Elementor — with..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Hamburger-Mobile-Menu-with-Elementor-Template_-1024x536.jpg word_count: 419 --- # How to Create a Hamburger Mobile Menu with Elementor Template? ## - The Navigation Menu widget from The Plus Addons for Elementor shows any Elementor template as a mobile menu, and the hamburger button opens it when Menu Type is set to Toggle. - The setup uses a published Elementor template from Templates > Saved Templates, with Responsive Mobile Menu turned on and Menu Content set to Template Menu. - The template must be published and designed mobile-first, because a draft shows an “Unauthorized Access” notice and the menu appears at the Open Mobile Menu width and below. Do you want a mobile menu that looks exactly like your brand? Instead of a plain list of links, you can design the whole mobile menu in Elementor — with a logo, buttons, icons or contact details — and open it from a hamburger button. The Navigation Menu widget from The Plus Addons for Elementor can show any Elementor template as its 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 published Elementor template** for the mobile menu (Templates > Saved Templates). Design it in the editor’s mobile view. ## Steps - Set up the desktop menu in **Layout** and **Content**.- In **Content > Mobile Menu**, keep **Responsive Mobile Menu** on and set **Menu Type** to **Toggle**.- Set **Menu Content** to **Template Menu**.- Pick your template in **Elementor Templates**. Use **Create Template** or **Edit Template** to build it without leaving the page. ![Elementor Templates with a template chosen for the mobile menu](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-template-menu.webp) On mobile, the hamburger button now opens your template. ## Which Mobile Menu Types Work? | Menu Type | With a template | | --------- | --------------- | | Toggle | Yes — the button opens and closes the template | | Swiper | The template is always visible, with no button. Not a hamburger menu | | Off Canvas | No — the Elementor Templates picker is hidden | ## Limitations - **The template must be published.** A draft shows visitors an “Unauthorized Access” notice instead of the menu.- **Design mobile-first.** The template sits in the mobile menu panel; wide multi-column layouts look cramped.- **One breakpoint.** The template shows at the Open Mobile Menu width and below. ## Troubleshooting ### Visitors see “Unauthorized Access” Publish the template, then clear the page cache. ### The button does nothing Look in the browser console for JavaScript errors from another plugin, and clear any JavaScript optimisation or cache. ### The desktop and mobile menus swap on different pages You are seeing an old cached copy of the header. Clear the page, CDN and Elementor CSS caches. ## Related Docs - [Create a toggle menu for mobile](https://theplusaddons.com/docs/create-a-toggle-menu-for-mobile-in-elementor/)- [Create a sticky menu](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/)- [Navigation Menu widget: settings overview](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/) ## Frequently Asked Questions **Q: What do I need before creating a hamburger mobile menu with an Elementor template?** A: The setup depends on three things: the Navigation Menu widget must be installed and activated in The Plus Addons for Elementor, the widget has to be enabled under The Plus Addons > Widgets, and the mobile menu template must already be published in Templates > Saved Templates. The header also needs to contain the widget so the menu appears across the site. Designing the template in mobile view matters because the menu panel is narrow and wide layouts can feel cramped. **Q: Can I use an Elementor template as the mobile menu in a hamburger button?** A: The Navigation Menu widget from The Plus Addons for Elementor lets you use any Elementor template as the mobile menu, which is what makes the hamburger button open a fully designed panel instead of a plain link list. That means you can include a logo, buttons, icons, or contact details inside the menu itself. The key detail is that this works through Menu Type set to Toggle with Menu Content set to Template Menu. **Q: Which mobile menu type should I choose for a hamburger menu with a template?** A: Toggle is the right choice when you want a true hamburger menu that opens and closes an Elementor template. Swiper keeps the template always visible, so it does not behave like a hamburger menu. Off Canvas does not expose the Elementor Templates picker, so it is not the path for this setup. For this use case, Toggle is the only option that matches the expected mobile-menu interaction. **Q: Why do visitors see an Unauthorized Access message in my mobile menu?** A: That message usually means the template is still a draft. The mobile menu panel expects a published Elementor template, and drafts are blocked from public viewing. Publishing the template fixes the access issue, and clearing page cache helps remove stale output if visitors still see the warning after it is live. This is one of those cases where content status matters as much as widget settings. **Q: Why does my hamburger button do nothing when I tap it?** A: A dead button usually points to JavaScript trouble rather than a bad menu setting. The page recommends checking the browser console for JavaScript errors coming from another plugin, then clearing any JavaScript optimisation or cache that might be breaking the click handler. That matters because even a correct Toggle setup will fail if another script interrupts the open-and-close behavior. **Q: Why do my desktop and mobile menus swap on different pages?** A: That usually means you are seeing an old cached copy of the header instead of the current one. Clearing the page cache, CDN cache, and Elementor CSS cache is the fix called out on the page. This kind of mismatch often shows up when one version of the header was updated but another cached version is still being served on some pages.