Do you want to add an additional popup mobile menu to your Elementor website? Adding a popup menu can be very helpful to show additional menu items in the popup keeping the main menu compact.
With the Mobile Menu widget from The Plus Addons for Elementor, you can easily create a popup menu with an Elementor template.
To check the complete feature overview documentation of The Plus Addons for Elementor Mobile Menu widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
What It Does
The Popup Mobile Menu feature of the Mobile Menu widget lets you attach a full Elementor template, built with any layout, links, or design, to the widget’s Extra Toggle button. Instead of cramming every link into the main mobile menu row, a single toggle icon opens that template as an overlay panel on top of the page.
Why It Matters
Mobile headers have limited horizontal space. Sites with secondary navigation, a language switcher, contact details, or promotional links often can’t fit everything into the primary mobile menu without overwhelming the visitor. A popup template keeps the main menu short while still surfacing secondary content on demand, which keeps mobile navigation fast and uncluttered.
What You Get
- An Extra Toggle button (icon, image, or text) placed inside the mobile menu bar.
- The ability to bind that toggle to any saved Elementor template instead of a plain link.
- Four open-content directions (Right, Left, Top, Bottom) so the popup slides in from the side that fits your layout.
- Two open-content styles and two width modes (Custom Width/Height or Full-Width/Height) to control how much of the screen the popup covers.
Benefits
- No extra plugin or custom code needed, the popup is built entirely with Elementor’s own editor.
- The template can hold anything Elementor supports, not just a menu, so it doubles as a mini contact card, mini sitemap, or promo panel.
- Works alongside the widget’s regular Menu 1/Menu 2 items, so it’s additive rather than a replacement for the main mobile nav.
Capabilities
- Content Direction – choose Right, Left, Top, or Bottom as the direction the popup opens from.
- Open Content Style – pick between the two built-in transition/appearance styles for the popup panel.
- Content Width – use Custom Width/Height to set exact pixel dimensions, or Full-Width/Height to make the popup cover the entire viewport.
- Margin control – when Full-Width/Height is selected, an additional margin slider is available to inset the panel from the screen edges.
How It Works
The Extra Toggle button’s Content setting has two modes: Link and Template. Switching it to Template hands rendering of the popup body over to a full Elementor template you select from your saved templates list, and the Open Content Direction, Style, and Width controls then govern how that template’s container animates onto the screen.
How to Use It
To do this, first, you have to create an Elementor template with the additional menu items.
Then, add the Mobile Menu widget to the header template and follow the steps –
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. After selecting the appropriate style from the Style section, create the menu.
2. Then go to the Extra Toggle tab and enable Extra Toggle.
3. After adjusting the icon/image and text, from the Content dropdown, select Template.
4. Then, from the Elementor Templates dropdown, you have to select your mobile menu template.
You can set the popup open direction from the Open Content Direction dropdown.
From the Open Content Style dropdown, you can select the popup open style.
Then, from the Content Width dropdown, you can set the popup width. Here, you’ll find two options –
- Custom Width/Height – With this, you can set a custom width and height for the popup.
- Full Width/Height – With this, you can set the popup width and height to full screen size.
Now you’ll see your additional menu item in a popup.
Use Cases
- A secondary “more links” panel for sites with too many footer-style links to fit in the main mobile menu.
- A quick contact/CTA panel (phone, address, book-a-call button) surfaced from a header icon on service sites.
- A language or store switcher panel for multi-region sites, built entirely inside the linked Elementor template.
Limitations
- Content Width options are mutually exclusive: Custom Width/Height and Full-Width/Height cannot be combined, only one mode applies at a time.
- The Margin slider only appears and applies when Full-Width/Height is selected; it has no effect in Custom Width/Height mode.
- The popup template is static content, it does not automatically resize its internal layout if you resize the popup panel itself after publishing, you need to re-check the template’s own responsive settings in Elementor.
Troubleshooting
The issues below are drawn from real support tickets for the Mobile Menu widget’s toggle and off-canvas behavior; none are specific to a popup-template configuration, but they cover the failure patterns most likely to affect it.
- Popup panel positioning breaks after custom header CSS. A support case (ticket #22079) showed a mobile dropdown’s positioning breaking once the customer added custom CSS to the header. If your popup panel appears misaligned, check custom CSS on the header/menu wrapper first.
- Panel content needs a refresh to show properly. A separate case (ticket #21475) reported an off-canvas mobile menu needing the page refreshed twice before subpage content displayed correctly. If your popup template looks incomplete on first open, try a hard refresh and clear any page cache.
- Popup width looks wrong in RTL or narrow preview. Ticket #20889 reported an unexpectedly narrow open-menu width tied to an RTL setup. If your popup or menu appears too narrow, check your site’s RTL/LTR setting and confirm the Content Width value matches your intended layout.
Also, read How to Create a Split Mobile Menu in Elementor.
