Scroll overlay form on mobile

[mistercreate (create.something)]

Hi there,

Definitely a great question!

I was able to take a look at your project, and create a test clone for you to test the custom code mentioned in the following forum post:

How to prevent body from scrolling when modal window open

How can one prevent scrolling when the off-canvas menu is open? I want the focus to be on the content of the nav menu when it’s open, so I want to limit/lock the visitor’s ability to scroll and distract themselves. The off-canvas nav menu (hamburger button) right here is a perfect example. Is this something that can be done in Webflow?

You can view the test at http://stark-yoga-test.webflow.io/courses-ljusdal/yoga-i-ljusdal

You will notice that the custom code used for your particular project is as follows:

<script>Webflow.push(function() {
  $('.take-course').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });

  $('.close-link').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});</script>

The above script works as follows:

When menu button (or any other object which class you will add) is clicked, the JS code will change the CSS of the body and make it overflow: hidden >>> that makes the body unscrollable.

Then, the next part of the script takes the click from another element (close button, menu, modal background, etc.) and change the CSS of the body again, making it overflow: auto >>> that makes the body scrolling again.

Definitely a great question, and hopefully this is helpful.

Got to see a huge thank you to @sabanna for the original walk-through