In this tutorial you are going to learn how to disable page scroll when the Elementor menu cart is opened.
Specifically, we are talking about the off canvas option you get from adding an Elementor menu cart to your header navigation.
Clicking it opened will reveal the current WooCommerce cart content, however the page can still be scrolled up and down in the background, and this can be annoying and confusing for the users.
Disable scrolling while Elementor Woo Menu Cart is Opened
To disable the page from scrolling while that off canvas Woo cart is opened, simply add this CSS to your website.
I suggest adding it to the Menu Cart element directly, under Advanced > Custom CSS.
<script> /* Please login to get the code * The code will be for the Elementor Menu Cart Disable Scrolling When Opened tutorial * Found at this URL https://element.how/elementor-menu-cart-disable-scrolling-when-opened/ */ </script>
This will prevent page scroll on all browsers that support the :has() pseudo selector (~92% browser support now).
Your results might vary for iOS however, as it has a mind of its own when it comes to scrolling.
Conclusion
I hope you have found this helpful! Enjoy your improved UX Elementor menu cart!
Cheers!
2 Responses
Hi, I have a menu and when clicking on the menu items a submenu opens and I would like the page scroll to be disabled. Is there any option that you can help me with please?
Greetings David!
Try this, and let me know if it works! This is for the new Menu element from Elementor.
:is(html,body):has(.e-n-menu-content>.e-con.e-active) {
overflow:hidden;
}
Cheers!