Page Scrolls When Hamburger Menu is Open; Causes 94px Gap Below Hamburger Menu

Hey Webflowers,

I am new to Webflow, but I am starting to picking it up really well now. However, the first thing I created was a navigation bar for the project I am working on, and this navigation bar is the vein of my existence for this project. I would simply recreate it more efficiently now that I have learned much more, but I am honestly hoping to avoid this unless everyone advises me it is necessary (it is 90% of the way there.)

Here is my primary issue: if you click the hamburger menu and it slides out, the body behind it can still scroll. This applies to all screen sizes, even if the body isn’t visible behind the menu on mobile, for example.

Furthermore, since the body can scroll, and I have an accompanying animation on the menu causing it to leave the viewport when scrolling, a gap is created below the hamburger menu of 94px (the overall size of the navbar, itself.)

Please help, I’ve run out of Youtube videos lol.

Here is public link: https://preview.webflow.com/preview/nots?utm_medium=preview_link&utm_source=dashboard&utm_content=nots&preview=b24e3bdbb48a7da623b7c99885c72ed8&mode=preview

P.S. see something that is an issue a newbie may not know? Feel free to leave any feedback you’d like, it would be so greatly appreciated.

Thanks,

Max

If for some reason you find functionality isn’t working well with the read-only link use: nots.webflow.io