Disable Site Scroll when Fullscreen Menu is Open

Simple
Disable Site Scroll when Fullscreen Menu is Open

If you're having issues with your website still scrolling when you open your navigation menu, this snippet will stop your headaches.

Go into your project settings and add this code to the </body> section of your custom code:

<script>
   // Stop body scroll when mobile menu is open
   const body = document.body;
   function letBodyScroll(bool) {
       if (bool) {
               body.style.overflow = 'hidden';
       } else {
           body.style.overflow = 'auto';
       }
   }
  const targetNode = document.querySelector('.w-nav-button');
   const config = { attributes: true, childList: false, subtree: false };
   const callback = function (mutationsList, observer) {
       for (let i = 0; i < mutationsList.length; i++) {
           if (mutationsList[i].type === 'attributes') {
               const menuIsOpen = mutationsList[i].target.classList.contains('w--open');
               letBodyScroll(menuIsOpen);
           }
       }
   };
   const observer = new MutationObserver(callback);
   observer.observe(targetNode, config);
</script>
Download Assets
See an Example Website

Other Code Snippets

Learn the Secrets to Supercharge Your Webflow Website

The newsletter with 0% spam, and 110% good tips and tricks.

Nice! You're in the loop. Talk soon.
Oops! Something went wrong while submitting the form.