---
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-02
lang: en
author: "Aditya Sharma"
description: "Do you want to create a custom hamburger mobile menu using an Elementor template? With the Navigation Menu widget from The Plus Addons for Elementor, you can use the full..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Hamburger-Mobile-Menu-with-Elementor-Template_-1024x536.jpg
word_count: 922
---

# How to Create a Hamburger Mobile Menu with Elementor Template?

## 

- The Navigation Menu widget from The Plus Addons for Elementor swaps the default WordPress mobile navigation for a fully custom Elementor template in the Mobile Menu tab.
- Menu Type offers exactly three options, Toggle, Swiper, and Off Canvas, but Template Menu works only with Toggle and Swiper because Off Canvas hides the Elementor Templates control.
- The widget panel includes live Edit Template and Create Template shortcuts, so the mobile menu template is built without leaving the Elementor editor.
- Template Menu supports mixing menu links with non-menu content such as buttons, images, social icons, a CTA button, or a mini contact block inside the same mobile panel.

Do you want to create a custom hamburger mobile menu using an Elementor template? With the Navigation Menu widget from The Plus Addons for Elementor, you can use the full power of Elementor to design a custom mobile menu that matches your brand exactly.

*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 lets you swap the default WordPress mobile navigation for a fully custom Elementor template - so what shows up when a visitor taps the mobile toggle is a section you designed yourself, not a plain link list.

## Why It Matters

A default mobile menu is a stacked list of link text. An Elementor-template mobile menu can carry your logo treatment, brand colors, icons, a CTA button, or even a mini contact block - the same design freedom you already have on desktop, applied to the screen most of your visitors actually use first.

## What You Get

- A **Menu Content: Template Menu** option that swaps the mobile nav source from a WordPress menu to any saved Elementor template
- Full compatibility with the **Toggle** and **Swiper** mobile menu types
- A live **Edit Template** / **Create Template** shortcut inside the widget panel so you never have to leave the editor to build the template

## Benefits

- Design the mobile menu once in Elementor and reuse it across every page that shares the header template
- Mix menu links with non-menu content - buttons, images, social icons - inside the same mobile panel
- Keep desktop and mobile navigation visually consistent without hand-coding CSS overrides

## Capabilities

This is a control on the Navigation Menu widget's **Mobile Menu** tab, gated behind the **Responsive Mobile Menu** toggle. It works with two of the widget's three **Menu Type** options - **Toggle** and **Swiper** - and needs a template already saved in Elementor (or created on the spot via the panel's **Create Template** link) before you can select it from the **Elementor Templates** dropdown.

## How It Works

First, you have to create an Elementor template for the mobile menu.

Then add the Navigation Menu widget to the header template. Once it is placed in the Elementor editor within your header template, configure the mobile menu settings as described 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. After creating the desktop menu from the **Layout** and **Content** tabs, enable the **Responsive Mobile Menu** toggle from the **Mobile Menu** tab.

2. Then select an appropriate option from the **Menu Type** dropdown. This dropdown has exactly three options - **Toggle**, **Swiper**, and **Off Canvas**. Both Toggle and Swiper work with the Elementor template approach below. Do not select Off Canvas here, as the **Elementor Templates** control is hidden for that menu type and requires a separate setup process.

3. From the **Menu Content** dropdown, select **Template Menu.**

4. Then from the **Elementor Templates** dropdown you have to select your mobile menu template. If you have not created one yet, use the **Create Template** link that appears in the panel instead of leaving the editor.

Suggested Reading [how to build a toggle menu for mobile in Elementor?](https://theplusaddons.com/docs/create-a-toggle-menu-for-mobile-in-elementor/)

Selecting a Template Menu as the mobile menu content in the Navigation Menu widget

Now you will see your Elementor template rendered as the hamburger mobile menu on your site.

## Use Cases

- Agency sites that need a custom-branded hamburger menu for mobile visitors
- Portfolio sites where the desktop navigation is complex and needs a simplified mobile version
- WooCommerce stores that want a focused mobile navigation to keep checkout simple

## Limitations

- Template Menu is not available when **Menu Type** is set to **Off Canvas** - the Elementor Templates control is conditionally hidden for that menu type
- You must save the Elementor template before it appears in the **Elementor Templates** dropdown; there is no live-preview-while-editing option from inside the dropdown itself
- The template renders inside the mobile panel's fixed width, so very wide desktop-style layouts (multi-column grids, large images) can look cramped on small screens - design the template mobile-first

## Troubleshooting

- **Mobile menu shows sometimes, desktop menu shows other times on the same device** - a real support case (ticket #15238) reported the widget alternating between desktop and mobile menu display across different pages using the same header template. This is almost always a caching/CDN issue serving a stale render of the header include - clear page cache, CDN cache, and any Elementor CSS cache after changing the Mobile Menu settings, then hard-refresh.
- **Toggle button does nothing on tap/click** - a real support case (ticket #3106) reported the mobile toggle not opening the menu at all, traced to a JavaScript conflict. Check the browser console for script errors, disable other menu/animation plugins one at a time to isolate the conflict, and confirm no theme or plugin is also hijacking the same toggle button class.
- **Template content looks fine on desktop preview but breaks on the live mobile panel** - source-verified, not from a specific ticket: this happens when the template was built using desktop-only Elementor responsive settings. Switch to the mobile preview mode inside the Elementor editor while building the template, not just when testing the final header.

Also, read [how to create a sticky menu in Elementor](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/).