---
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-05-07
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: 327
---

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

## 

- Utilizes the Navigation Menu widget from The Plus Addons for Elementor to create a custom mobile menu.
- Requires installation and activation of The Plus Addons for Elementor to access the Navigation Menu widget features.
- Enables the Responsive Mobile Menu toggle and selects Template Menu from the Menu Content dropdown in Elementor.

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.

**Best Used For:**

- 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

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

To do this, first, you have to create an Elementor template for the mobile menu.

Then add the Navigation Menu widget to the header template and follow the steps below. Once you have the Navigation Menu widget placed in the Elementor editor within your header template, configure the mobile menu settings as described.

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

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. The hamburger, slide, and dropdown options all work with the Elementor template approach. Do not select Off Canvas here, as that 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.

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

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

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