Fullscreen menu that disables page scroll

Design help General
1

I’m trying to make a fullscreen menu that when opened prevents the page from scrolling. I’ve read around on the forums but can’t seem to get anything to work. What I’m trying now is from this thread and used the following custom code in the Footer Code section.

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

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

https://preview.webflow.com/preview/fullscreen-menu-explore?utm_source=fullscreen-menu-explore&preview=09d82dae08c0b1fec49159c9499e53c9

1 Like
2

Works for me when I place the code at a page level in the body tag. where are you putting it?

3

I put the code in the Footer Code section in project settings.

4

I got it to work by adding “html” with body. So now the code looks like this in my global footer.

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

  $('.link').click(function(e) {
    e.preventDefault();
	$('body, html').css('overflow', 'auto');
  });
});
</script>
1 Like
5

That’s good to know.