Create an Elementor Mobile Popup Menu in WordPress using EPro

In this tutorial, I’ll show you how to create an Elementor Mobile Popup Menu which is only triggered for your mobile site visitors. The mobile popup menu is displayed once your mobile site visitor clicks on a specific element you set to display the menu popup as you see in the image below.

elementor mobile popup menu

For this tutorial you’ll need; Elementor Pro, a header and a unique section dedicated to displaying on mobile devices.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Mobile Popup Menu Tutorial

Create A Header in Elementor

With your Elementor Pro ready, go to your WordPress dashboard and under Elementor > Templates > Theme Builder, go to the Header section (00:49), here you can create a new header. You can use the Elementor premade header templates or you can create yours from scratch.

When you open up your template with your Elementor editor, select the column containing the navigation then go to Advanced > Responsive (02:44), this column is hidden on both tablet and mobile devices, it’s only visible on the desktop.

6wmUaQIrENE SIEuxHIbvfelZx1walUQwdEayEyELpTJhMBeQjowXT2JtYzUnzJHD3tp0OgRUvdiU26MsPc3ltf8yLhK ncpeppj0itYYpECJ0zg7Zbk9D6ztW lJ4 ZiATjfe0n

The last column (02:49) is hidden on both the desktop and tablet, it’s only showing on mobile.

8Lhv3i r64EcnVGiuQUFHXXgzN1WCtkcEgNaQAmQOP9NKY9GRDD1Q4PDkgeSvobfL n21 2tr53gdl3UWFLp8TVXtfdrJsMF30c7br5gLO6A x540o2Wz5D892 CIAW1 XiohoLL

To Read: Create Bespoke Elementor Page Transitions in EPro v3.6

Create a Mobile Popup in Elementor

On your dashboard go to Template > Popups > Add New, under Type of Template select Popup, give it a name and then Create Template (03:29).B3y e6wuNZRica2NGPHl YCQYZePrUF9aSm 0bjOK1PSsAzwkM

After you create your popup template open it up in the Elementor editor, and here you can add any elements you want to it, for example, if you want to add a video you can just drag a video widget to it (03:44), you can add slides to it, etc. 

eQhZuA8Tdd7VLG9CQUSqQ7N04ASApwcrR37ZCzVXn4 tUDuomWfl4 WXzqc97zYA0Ou8SIdM34BL6GFhpoygSwJH8J2nBu3iUfa4c DQqzF0nciGhdElF6Tm6Qpi2Je 8lTqoZh

Set up your popup with a Logo, and a Navigation Menu with a vertical layout under Edit Nav Menu > Content > Layout. Under Mobile Dropdown > Breakpoint, select none. 

The popup should also have a Button.

Set up Display Conditions for your Elementor Popup

When you’re done creating your popup, click the Update button. 

Go to Display Conditions and select Entire site, then under Triggers select On Click. Under Advanced Rules, select tablet and mobile then Save & Close (05:58)

uG6RYvgA6VXPGnkXYcPB oP7KQh H2xUjjQhWNhivRFRBtdhTzWq1 0hpm9KNShDvF7NIjCWN2dW7K1Do05sO az4efJ OICGNkqBamet9Z34Uf9fwsDWbemh8UHQzvAvVSjQQkM

Back to your header, go to the third column the Menu button, we need to set it up so that when someone clicks on it it brings up the popup.

In the Edit Button area on the left, go to Content > Link, select Dynamic then scroll down to Actions and select Popup. On the Popup settings, select Open popup under Action, then under Popup select the popup you created, then click the Update button.

After updating, the Menu button will appear on the mobile version of your website, and when you click on it, your popup should appear (07:33), and when you click on the menu items you are able to view their details. To go back to the home page just click on the logo.

MzXmNt3UtT9uuz56LE3uaGl j3XNTNoneiDdlqtU0OdD3v9wQY7ovKg8CZDOqS8wq9SthroSbHrd9VB tchvtPVHOG hVztTs4kZG1XFJ G7L5S9BKvDZjg6rOwr h8qKPciwfQp

Also Read: Elementor Reading Progress Tracker (Add a Circular or Horizontal Progress Tracker with EPro

In closing

That’s how you can use Elementor to create and use a mobile popup menu with just need a few steps; 

Create menu navigation, choose which elements you want to appear on the desktop and mobile versions, create your popup and set up its display conditions and you’re good to go.

If you have any questions or comments about this or any other tutorial, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users