Close Your Elementor Popup Menu on Link Click

Elementor Pro popups are a common way to build a mobile or off-canvas menu. When that menu links to sections on the same page, clicking a link scrolls the page but leaves the popup open on top of it. The jQuery snippet below closes the popup as soon as a visitor clicks any link inside it. Popups are an Elementor Pro feature, so you need Elementor Pro for this.

Add the code to the popup

Open the popup in the Elementor editor and add an HTML widget to it, in the same popup as your menu. Paste the code below into the widget, wrapped in <script> and </script> tags, then update the popup.

jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
});
});

For reference, this is Elementor’s HTML element:

How it works

• The click handler is attached to document and filtered by a selector, so it catches clicks on matching links whenever the popup is shown.
• .elementor-location-popup a matches every link in any Elementor popup on the page, not only the popup that contains the HTML widget.
• elementorProFrontend.modules.popup.closePopup() is Elementor Pro’s front-end function for closing a popup; the click event is passed along to it. Because the snippet calls it directly, test the menu again after major Elementor Pro updates.
• jQuery(function($){ … }) waits until the page is ready and makes $ available inside the function, which also avoids the $ is not a function error in WordPress.

Related articles

• smooth scrolling to page sections without a hash in the URL: pairs well with a one-page popup menu
• fixing an Elementor editor that keeps loading: memory and PHP checks for Elementor sites