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.

elementor popup menu link close
Add code to Elementor > Custom Code.

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.

elementor custom snippet published
Set the location and display conditions.

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.

Share this post if you like it.
Worda Team
Worda Team

Our team of WordPress professionals will help you stay on the latest WP topics, resolve any problem or issue with the WordPress website or provide useful advice. Feel free to get in touch with us. :)

One comment

Leave a Reply

Your email address will not be published.