help center

Search
Close this search box.
On this page

Trigger a popup from a nav menu

Last Update: June 24, 2024

Triggering a popup from a nav menu item is easy to do.

Create the Popup

  1. First, create your popup.
  2. In the Advanced tab of the Popup Settings, we will add a small code snippet into the Open By Selector field. For this example, we’ll enter the code shown below.
    a[href="#popup-menu-anchor"]
  3. Now publish the popup and set the Display Conditions. If the menu is in a site wide header, set the Display Conditions to Entire Site. If the menu is on a specific page, set the Display Conditions to that specific page (Singular > Pages > search and select your page).
  4. Ensure that no Triggers or Advanced Rules are set for your popup.

Note: Make sure that straight quotes are used and not curly quotes to avoid jQuery errors.

image 2 Trigger a popup from a nav menu 1
Enter code in the field shown in this image.

Edit The Menu Item

  1. Next, edit your WordPress menu located at Appearance > Menus.
  2. Add a new Custom Link
  3. In the URL, use the selector name created above ( example: #popup-menu-anchor)
  4. Enter the link text
  5. Save your menu
image 4 Trigger a popup from a nav menu 3
Add selector to custom link in menu.

That’s it! Now, when a user clicks the menu item, the popup you designed will be triggered.

Keep visitors engaged with an exit-intent popup. Elementor Premium Services offers expert help designing and implementing the perfect popup.

Need expert help in creating that perfect lead-collection popup for your marketing campaign? Check out Elementor Premium Services.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!