Fullscreen Menu / Disable Webpage Scrolling

Hi all,

I really, really would appreciate if someone can please help me out with this.

I’ve got a fullscreen menu on my webpage, and all I want to do is disable scrolling. I followed Nelson’s tutorial on how to build a custom menu.

The menu opens just fine, but I can’t seem to get the custom code to disable the webpage scroll to work. Please, please can someone help! I’m literally so desperate and I can’t move forward with my website until I get this sorted out!

Here’s the read-only link: https://preview.webflow.com/preview/varta-attempt-1-e178527d5-39e5f9c02eaf9?utm_medium=preview_link&utm_source=designer&utm_content=varta-attempt-1-e178527d5-39e5f9c02eaf9&preview=ee19977413aa505858617ad673733ae9&mode=preview

Thanks
Shrutika


Here is my public share link: LINK
(how to access public share link)

Hello @shrutikashah.design,

Did you also check this Nelson Tutorial about full screen menus? How to Webflow: Full screen menu - Tutorial (2019) - YouTube there he explains what you need to use to prevent your page from scrolling, you will need some custom code, but the code is included on the video description. Good luck.

Hi Pablo,

This is the tutorial I used and I managed to get it working finally, but the website won’t load correctly on iOS devices. Is there a fix?

Hello @shrutikashah.design,

Most of the issues with iOS devices are due to the version of the browser. Do you know what version you tested on?

Hi Pablo,

It finally seems to have worked on iOS!

Turns out the page wasn’t loading right because of SVGs on my webpage – SVGs need to be exported a certain way for them to work on iOS (I love Apple but I don’t know why they must make all this so hard).

There’s a problem getting one piece of my code to work though which makes the webpage scroll and appear back to the hero section when the page is refreshed – this code doesn’t work on Safari at all and works periodically on my iPhone. Really cannot figure out why! Works fine on Chrome!

1 Like