---
title: "How to Create a Popup Mobile Menu with Elementor Template?"
url: https://theplusaddons.com/docs/create-a-popup-mobile-menu-with-elementor-template/
date: 2023-10-28
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A popup panel keeps a mobile menu bar short: the bar holds the main links, and one button opens a panel with everything else, such as extra links, contact details..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Popup-Mobile-Menu-with-Elementor-Template_-1024x536.jpg
word_count: 721
---

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

## 

- The Plus Addons for Elementor Mobile Menu widget opens any saved Elementor template in a slide-in panel from the Extra Toggle button.
- Extra Toggle content uses Set Content to Template, and the panel can open from Right, Left, Top, or Bottom with Style 1 or Style 2.
- Content Width controls the panel size, with Custom Content Width/Height defaulting to 400 px and Full-Width/Height filling the screen minus Margin (%).
- Published templates are required, because a draft template shows an Unauthorized Access message and no selected template leaves the panel empty.

A popup panel keeps a mobile menu bar short: the bar holds the main links, and one button opens a panel with everything else, such as extra links, contact details or a store switcher.

The **Mobile Menu** widget from The Plus Addons for Elementor opens any saved Elementor template in a slide-in panel from its **Extra Toggle** button.

*To check the complete feature overview documentation of The Plus Addons for Elementor Mobile Menu widget, [click here](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/mobile-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## Before You Start

- **Edition:** **Pro** — Mobile Menu is a Pro widget. In the free plugin it appears in the Elements panel with a lock icon, and a page that already holds a Mobile Menu widget shows nothing of it while Pro is inactive.- **Widget to enable:** Mobile Menu, switched on under **The Plus Addons > Widgets**.- **Where to add it:** any page, or a header template (for example with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/)) to show the menu on every page, as the widget's own panel recommends.- A **published** Elementor template (Templates > Saved Templates) with the content for the panel.

## How to Create a Popup Mobile Menu

- Add the **Mobile Menu** widget, choose a **Style** and build the bar's items in **Menu 1** (and **Menu 2** for Style 2).- Open **Content > Extra Toggle** and switch on **Extra Toggle**. Choose an icon or image in **Select Toggle Icon** and enter the button **Text**, for example Menu.- Set **Content** to **Template**.

![Content set to Template in the Extra Toggle section of the Mobile Menu widget](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-et-content.webp)

- Pick your template in **Elementor Templates**.

![A saved template selected in the Elementor Templates dropdown of the Extra Toggle section](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-et-template.webp)

- Choose where the panel comes from in **Open Content Direction**: **Right** (default), **Left**, **Top** or **Bottom**.

![Open Content Direction dropdown in the Extra Toggle section, set to Right](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-et-direction.webp)

- Choose the **Open Content Style** and the **Content Width** (see the table below), then publish and tap the button on a phone.

![Content Width dropdown in the Extra Toggle section with Custom Width/Height selected](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-et-width.webp)

On a 390 px phone the panel opened from the right covers the screen, with its close button in the top-right corner:

![Popup mobile menu panel open on a phone, showing a Quick links template and a red close button](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-result-template-right.webp)

## Panel Settings

| Setting | Options and result |
| ------- | ------------------ |
| **Open Content Direction** | **Right** / **Left**: a side panel slides in. **Top** / **Bottom**: a panel as wide as the screen slides down or up. |
| **Open Content Style** | **Style 1**: the panel slides in. **Style 2**: the panel stays hidden until it opens and is revealed with an animated background. |
| **Content Width** | **Custom Width/Height**: **Custom Content Width/Height** (default 400 px) sets the width of a side panel or the height of a top or bottom panel. **Full-Width/Height**: the panel fills the screen, minus the **Margin** (%) on every side, and is centred. |

A **Top** panel is 400 px tall by default and dims the page below it:

![Popup panel opened from the top of a phone screen over the dimmed page and menu bar](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-result-template-top.webp)

**Full-Width/Height** with a **Margin** of 10% leaves a frame around the panel:

![Centred popup panel with a margin around it on a phone screen](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-result-template-fullwidth.webp)

## Close Button and Styling

The panel's look is set in **Style > Extra Toggle Template**: **Overflow**, **Inner Padding**, **Content Background**, the close button colours and the **Overlay Background**.

- **Close Icon Position** places the close button in one of six corners and edges (Top Right by default).- **Auto** removes the separate close button: while the panel is open, the Extra Toggle button in the bar turns into an X that closes it.

![Close Icon Position dropdown in the Extra Toggle Template style section](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-close-position.webp)

## How It Behaves

- While the panel is open, the rest of the page is covered by a dark overlay.- The close button closes the panel. Tapping the dark overlay beside the panel closes it too.- The default 400 px side panel is wider than most phones, so it covers the whole screen and only the close button is left. Lower **Custom Content Width/Height** to leave part of the page visible.- The Extra Toggle also works in the middle of a split menu (Style 2).

## Limitations

- The template must be published. With a draft template, visitors see an *Unauthorized Access* message in the panel instead of the content. With no template selected, the panel opens empty.- Keyboard users cannot reach the Extra Toggle button with the Tab key. While the panel is closed, Tab moves through the links inside the hidden panel instead.

## Troubleshooting

### The panel shows "Unauthorized Access"

Publish the template in **Templates > Saved Templates**, or pick a published one.

### The panel is empty

Select a template in **Elementor Templates**.

### The panel covers the whole phone screen

Set **Custom Content Width/Height** below the phone's width, for example 300 px.

## Related Docs

- [Mobile Menu widget settings overview](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/)- [Create a split mobile menu](https://theplusaddons.com/docs/create-a-split-mobile-menu-in-elementor/)- [Create a hamburger mobile menu with an Elementor template](https://theplusaddons.com/docs/create-a-hamburger-mobile-menu-with-elementor-template/)

## Frequently Asked Questions

**Q: What do I need before creating a popup mobile menu with an Elementor template?**
A: The key requirement is a published Elementor template, because the Mobile Menu widget opens that saved template inside the panel. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also requires the Pro widget to be installed and activated, and the Mobile Menu widget itself must be switched on under The Plus Addons > Widgets. That setup matters because a draft template shows Unauthorized Access instead of the menu content.

**Q: Can I use the Mobile Menu widget in a header template so it shows on every page?**
A: A header template is a practical place for this widget when you want the menu available site-wide. The page says it can be added to any page or to a header template, and it even mentions using the free Nexter Builder as an example. That makes it useful for keeping the mobile bar short while still exposing extra links, contact details, or a store switcher in the popup panel.

**Q: Why does the mobile menu panel show Unauthorized Access?**
A: That message usually means the selected Elementor template is still a draft. The panel only renders published templates from Templates > Saved Templates, so visitors will see Unauthorized Access until the template is published. This is an easy miss because the widget itself can be active while the content source is not ready.

**Q: Why is my popup mobile menu panel empty?**
A: An empty panel means no template was selected in Elementor Templates. The widget opens whatever saved template you assign, so without that selection there is nothing to display. This is different from the Unauthorized Access case, which points to an unpublished draft. Picking a published template fixes both content and visibility issues.

**Q: Why does the popup mobile menu cover the whole phone screen?**
A: The default Custom Content Width of 400 px is wider than most phones, so a side panel can fill the entire screen on mobile. The page recommends lowering Custom Content Width/Height below the phone width, such as 300 px, if you want part of the page visible. That matters most on small devices where side panels have very little room to breathe.

**Q: What is the difference between Style 1 and Style 2 for a popup mobile menu?**
A: Style 1 makes the panel slide in normally, while Style 2 keeps it hidden until it opens and reveals it with an animated background. The Extra Toggle also works in the middle of a split menu when Style 2 is used. That choice affects both motion and layout behavior, so Style 2 fits more animated presentations while Style 1 stays simpler.