How to make Nav on mobile like in example?

Design help General
1

Hi there!

Is it possible to prevent scrolling page while the nav manu on mobile is open and we scroll the menu? For now when I scroll menu on mobile it blinks and shows page underneath. The best example what I want to achieve is here On that page you can easily scroll menu, and the page below is static. Just great!
Public link: https://preview.webflow.com/preview/cia-poland?preview=c2b6fb1007f258d536f3a46176c13fd7
Please, if you have any ideas…

Cheers,
M

2

Hi, you haven’t put any link on the “here” supposed to show your reference.

Edit found it i the code www.sii.pl

3

oh, yes, sorry about that.

4

I already had the same problematic and I found help from @bart who crafted a code for me. The code uses a CSS property that prevents the Body to scroll. It’s when you put overflow:hidden to the body.

So basically it passes the body overflow:hidden when you click on something, and reverse it when you click on something else. It’s maybe going to be an issue for you because of the many things you can click when the menu is open.

Add that script at page level in the second custom code zone.

<script>
Webflow.push(function() {
  $('.project-item').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });
  $('.close-panel').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>

Replace .project-item by the class of the object you click on to open the menu.

Replace .close-panel by the class of the oobject you click on to close the menu.

I’m going to ask if it’s possible to put several classes at once.

5

Yes it works with multiple classes.

However you may not need it so try this, in your case:

<script>
Webflow.push(function() {
  $('**.menu_button**').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });
  $('.sub_link').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>
6

Thank you so much @vincent but for now it works only on desktop :confused: I tried it on mobile and it dosen’t work.

7

Ah, yes that’sgoing to be an issue. could you try to play with Scroll on the menu?

http://vincent.polenordstudio.fr/snap/gmg86.jpg

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.