Why Won't My Popup Work With My Mobile Menu?

Overview

A popup attached to a main menu item works fine on a desktop screen, but not on a mobile device or mobile menu. Here are 3 recommended solutions to resolve the problem.

Solution #1 -- Set a Trigger with a Custom CSS Selector

The most likely cause is that your theme duplicated your Main Menu to create a mobile version. Theme makers then hide the desktop nav menu on mobile screens. This is a pretty common practice. 

What is not common (nor good practice) is that some theme makers strip out the classes and other customizations for the Main Menu added via the WordPress Menu Editor.

If this is the case, set a click open trigger on a menu navigation item with a custom CSS selector. Refer to method 3 in the related article link below.

Related article:  Trigger: Click Open -- Overview & Methods

For assistance in identifying and targeting CSS selectors, refer to the following article.

Related article:  Getting CSS Selectors

Solution #2 -- Set a Trigger on a Nav Menu Item

If  the custom link method does not display a popup from a navigation item, substitute a different link type (page, post, or category) for the custom link. Some themes prevent the '#' character that precedes the Popup Maker '#-popmake-' class from working properly in custom links.   

This change has two benefits: 

1. it provides a graceful fallback if the visitor doesn't have JavaScript enabled, and 
2. it improves search engine optimization (SEO) to index the site menu. 

An alternative trigger setting method is to select a popup from the drop-down menu labeled 'Trigger a Popup'. Refer to method #1 in the following related article. 

Related article:  Open a Popup from a WordPress Nav Menu

If method #1 does not work because a menu editor function is overwritten by Popup Maker, follow method #3 in the same article. 

Related article:  Popup Maker Is Overwriting My Menu Editor Functions - How Can I Fix This?

Solution #3 -- For 'UberMenu' Users

Note: UberMenu is a premium WordPress plugin developed and supported by SevenSpark.  Please contact the developer directly for help in the setup and use of their plugin. 

Use the UberMenu special element “ Custom Content“, then add <a> tag, and use "#popmake-{integer}" as the link. The ID integer value is assigned by Popup Maker for each popup. 

Go to 'Popup Maker' (menu) >> 'All Popups' >> 'CSS Classes' (column) to locate the ID integer value for your specific popup.