Menu not scrolling on horizontal iphone

I made a custom menu and it works fine on desktop and android devices, but on horizontal iphone I can’t scroll the menu down even though the container is on scroll:auto. Anyone else bumped to this?

Link here:

https://preview.webflow.com/preview/mot-fcbca7?utm_medium=preview_link&utm_source=designer&utm_content=mot-fcbca7&preview=882c8e0f3b9edc37040d478045f4ec72&workflow=preview

Anyone have any idea on this? :frowning:

Hey @tmitomppalonen

can you try adding the overflow:auto to the “menu_wrapper” class?

Nope. Doesn’t help because the inner div (which has all the links) height never goes over the screen. Even if I make that divs height auto… nothing. So weird because this works on android.

I guess I have to carefully re-do the whole menu and see in what stage it breaks in apple.

Ok. It’s the finsweet disable scroll js script that jams not only the body but the menu also.
Anyone noticed something like this in apple devices?

so this bit is in my inside head box:

<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-scrolldisable@1/scrolldisable.js"></script>

And this code is embed html box:

 <script>
 // when DOM is ready
 document.addEventListener('DOMContentLoaded', ()=>{
  // on .open-modal click
  document.querySelectorAll('.open_nav').forEach(trigger => {
   trigger.addEventListener('click', function(){ 
   // on every click
     document.querySelectorAll('body').forEach(target => target.classList.add('no-scroll')); 
   });
  });
 
  // on .close-modal click
  document.querySelectorAll('.close_nav').forEach(trigger => {
   trigger.addEventListener('click', function(){ 
   // on every click
     document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll'));    });
  });
 });
</script>