Open a Popup from a WordPress Nav Menu

This is the second of 5 articles that describe Click Open trigger-setting methods. Use this method to set a trigger on a navigation element.

Method #1: Select the Popup from the Trigger a Popup Dropdown #

Note 1: This approach automates the process of setting a Click Open trigger using Method #2 in the article ‘Trigger: Click Open — Overview & Methods’ ( see the section labeled “Five Available Methods to Set a Click Open Trigger” ).

1. From the WP Admin Area, navigate to Appearance -> Menus
2. Add or Edit a Menu Item
3. Select a popup from the drop down menu under the Trigger a Popup Label. Only popups with a status of Published will appear in the drop down.
4. Save the menu and refresh your site – the menu item will now trigger the popup!

Note 2: Sites that run a theme or plugin with ‘Mega Menu’ functionality may experience difficulty either setting or displaying a popup from a site navigation menu element. Please refer to our documentation on how to address this issue.

Method #2: Add a Custom Link to Your Menu #

1. From the WP Admin Area, navigate to Appearance -> Menus
2. Click on the Custom Links drop down.
3. Input your popup link in the URL field: ‘#popmake-123‘ where ‘123’ is the ID number of your popup. The popup ID can be found in the WP Admin on the ‘All Popups’ screen, CSS Classes (column). 
4. Set your preferred link text, and click Add to Menu. Save the menu and refresh your site.
5. Your menu item will now trigger a popup!

Method #3: Add a Class to the Menu Item #

1. From the WordPress Admin Area, navigate to Appearance -> Menus
2. Click on ‘Screen Options’ in the upper right corner of the screen.
3. Check the box for “CSS Classes.“ Close the Screen Options pane.
4. Click on your menu item. You will now see a field to add your own CSS classes at the bottom.
5. Add the correct `popmake-{integer}` class to your menu item as shown above.
6. From the WP Admin, open ‘Popup Maker’ >> ‘All Popups’ >> ‘CSS Classes’ (column). Find the Popup Maker generated class in the CSS Classes column and enter it into the CSS Classes field on the Menu page.
7. Save the menu and refresh the site. On the front of the site, click the targeted menu item to display the popup.