How to Open an Elementor Popup from Your WordPress Navigation Menu – A Short, Simple Guide
table of contents
In this guide, you’ll learn how to create a popup in Elementor and trigger it directly from a WordPress navigation menu item—no extra plugins, no complicated code. The solution is based on the “Open by Selector” trigger and uses CSS classes on the menu item.
Creating the Popup in Elementor
In the WordPress dashboard, go to Elementor → Templates → Popups.
Click Add New Popup, give it a name, and add your desired content.
Design the popup as needed and then save (Publish).
So far it’s just like any regular Elementor form; now we’ve reached the core step—configuring the “Open by Selector” trigger.
Within the Elementor popup editor, click the Settings icon (the gear wheel).
Switch to the Advanced tab, then select Open By Selector.
CSS Selector field: enter the selector, for example:
.menu-item-contact-popup
Important: The selector must include a dot (.) before the name.
Adding a CSS Class to a WordPress Menu Item
In the WordPress dashboard, go to Appearance → Menus.
If you don’t see the “CSS Classes” field next to menu items: click Screen Options (at the very top) and check the CSS Classes box.
Select the menu item you want to link the popup to (for example, “Contact”).
In the CSS Classes field, add the name (without the dot):
menu-item-contact-popup
Important: Enter the selector without the dot before the name.
In the URL field, enter # only, to prevent the page from reloading.
Navigate to your site’s page and click the new menu item—the popup should open immediately.
If it doesn’t appear:
- Check that there’s no error in the selector (dot vs. no dot).
- Make sure the popup is published and not restricted by any display conditions.
