Prevent Background Scroll on Mobile Menu Overlay

Hi all,

I’m trying to prevent background scroll when a user opens a mobile menu and have created some Jquery that works on desktop browsers but not on iphone yet… Any ideas?

The idea is that when the nav is visible or “display: block;” that I add an “overflow: hidden;” class to the body.

<script>
if ( $(".w-nav-overlay").css("display") == 'block' ){  
$("html, body").css({"overflow": "hidden", "position": "fixed"});
}; 

if ( $(".w-nav-overlay").css("display") == "none" ) {  
$("html, body").css({"overflow": "visible", "position": "relative"});
};
</script>

https://preview.webflow.com/preview/the-natural-barber-co?preview=023af5fe710f6bd2cae1bdd5d11746d8

Live Link: https://www.thenaturalbarber.com/home

Add the live URL (no way to see the problem by the editor).

Hey @Siton_Systems

I’ve added the live link https://www.thenaturalbarber.com/home