How To Trigger A Popup From A Nav Menu Item

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

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, add a class name (with the preceding dot) into the Open By Selector field. For this example, we’ll enter .break-free
  3. Now publish the popup and set the Display Conditions. If the menu is in a sitewide 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.

Edit The Menu Item

  1. Next, edit your WordPress menu located at Appearance > Menus.
  2. Open the Screen Option tab located in the upper right corner.
  3. Check the CSS Classes box. This will allow you to add a CSS class to any menu item.
  4. Edit the menu item that will trigger the popup.
  5. Add the class name you assigned in the popup in the CSS Classes field for that menu item (without the preceding dot). For this example, we’ll enter break-free

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

Have a question about this?