Streaming live at 10am (PST)

Push NavBar Menu


#1

Guys, I have a navbar that manages to push the entire body content to left via interactions. I now need to solve two issues:

  1. when the menu is active, I want to disable scroll for body
  2. want to make the menu responsive on height (small displays can't entirely see it)

Another option to solve this both issues would be a way to disable scroll for body and enable it for menu while menu is active. This way the smaller displays can scroll the menu on height to see rest of menu content.


#2

You can use this code at page level. it's a javascript code that @bart made for me once. It does exactly this, for the same reasons than yours.

<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>

You need to change two things on the code. First replace .project-item by the class of the object you click on to open the menu, then replace .close-panel by the class of the object that closes it. First click will pass the body to overflow hidden, wich will prevent it to scroll, second click will reverse that.

Use VH units, it means percentage of the height of the viewport. Type in VH and webflow will take it. (like try 40VH and vh will replace pixels or percents)


#3

I tried and I think it doesn't work. Copied the code and replaced the classes, pasted it in custom code of the page itself, also on the custom code area on site settings.


#4

Can you share your public link please?


#5

Sure,

http://swifticons-14.webflow.io


#6

Can this be used to get rid of the inability to scroll dropdown menus that are longer than the phone? If the page can't scroll, the menu should scroll right?


#7