Close Elementor Popup on mobile after menu click

You can create a responsive menu that will trigger the popup build with Elementor. By following the official video guide here: https://www.youtube.com/watch?v=_sJRHSmIpp8 you can see how to make one.

However, if you are building a one-page website, you might face the issue with the anchor links as the page will scroll to the section, but the popup will not close automatically.

So, let’s make the popup closes each time the link or anchor is clicked upon.

Close popup on menu anchor link jQuery snippet code

To be able to close the popup once the link has been clicked on mobile devices, we need to add a custom jQuery script to detect the click and close the popup.

Step 1.

Navigate to Elementor > Custom code.

Click on the Add new button and enter the name for a custom code snippet, for example, popup menu fix or similar.

Copy and paste this code inside the field and save changes.

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

Set the location to </head> tag and make it visible on pages or categories of your choice and publish the snippet.

Please note that this code is generic and it will target all popup windows, if you need to target some specific popup, please try to determine the location and apply the proper class link element.

Conclusion

This jQuery snippet for closing the popup menu on mobile devices should work in most cases. If you have any issues or suggestions, please leave your comment below.