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.

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.

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

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

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. 

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)

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.

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.