Key Elements

CSS, Tips & Tricks

How To Trigger A Popup With a Menu Item

How To Trigger A Popup With a Menu Item

For this tutorial I will show you how to trigger a popup via a custom menu item. The process is pretty simple and won’t require too much of your time.

My Working Environment

Theme: Hello Theme

Elementor Version: Pro

Let’s Begin

I am going to assume you have already designed your popup using the Elementor Popup Builder.

Open your popup settings and go to the advanced tab.

Once their you will need to add a selector that will be used to trigger the popup.

Next we need to configure our conditions. Below are the conditions I set for my demo.

Setting up the menu item.

Navigate to your menus and select the menu you want to use.

Before we get to far ahead we need to display the css classes option for each menu item.

To do this select screen options in the top right corner and check css classes and close the screen options tab.

Add a custom link to your menu.

Open your custom link item and give it the css class you chose for your popup selector.

If you have followed my instructions when you visit the menu on the front end you popup will show when you click the menu item.

Hope This helps. 😀

2 Responses

Leave a Reply