How To Close Elementor Popup On Mobile After Menu Click

Rifat Business Dec 27, 2022

Pop-up forms can be a great part of your marketing strategy if you know how to use them right. They can help you get email addresses, boost sales, and more. But it's not always easy to make popups in WordPress that look good and are formatted in a unique way. Elementor, a plugin for building web pages, simplifies the process of making and modifying pop-ups for your site. You can modify them to look how you want them to and set off additional triggers based on user actions or geographical location. When creating a single-page website, however, you may run into trouble with anchor links, as the page will scroll to the section, but the popup will not close on its own. To fix this, let's make it so that when a link or anchor is clicked, the pop-up window closes itself.

Close Popup On Menu Anchor Link jQuery Snippet Code

Adding a custom jQuery script to detect a click and close the popup upon its occurrence is necessary for the popup to close properly on mobile devices after a link has been clicked.

To get started, head to Elementor > Custom code.

Select the Add new button, then give your custom code snippet a descriptive name like "popup menu fix" or something similar.

Make your edits by pasting this code into the area.

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

To make the snippet available on the pages or in the categories you specify, place it in the /head> tag and hit "Publish."

Conclusion

Elementor pop-up menu might create some issues to pop-up menu closing. This bit of jQuery should get the job done when you need to close the mobile pop-up menu. Please share your thoughts and concerns in the section below.

Divi WordPress Theme