Stop page scroll on mobile when navigation dropdown menu is open

Site URL: http://www.moonlitdesign.uk

Hey!

I am having issues with my navigation menu on mobile when the dropdown is open. It is currently giving me the ability to page scroll which is causing my sticky nav bar designed for scroll to appear and take over the static nav which has the 'X' close icon. Could I please have some help to try and disable the scroll so the sticky nav does not appear.

www.moonlitdesign.uk

FOR MOBILE

It looks like you removed burger menu. Do you still need help?

On 2/7/2022 at 12:48 PM, tuanphan said:

It looks like you removed burger menu. Do you still need help?

Hi Tuanphan, 

Yes please I do still need help. I have also managed to break a few other things on my site if you look at my other threads. I'm really not sure what's going on! 😞

www.moonlitdesign.uk/home 

The dropdown menu on mobile shows the sticky navigation bar instead of the normal menu header, when you scroll/ open the menu from anywhere other than the landing page. 

Since adding in an announcement bar,  It has affected the scrolling ability on mobile where the page seems to be getting stuck!!!

Thank you so much in advance. 

On 2/7/2022 at 12:48 PM, tuanphan said:

It looks like you removed burger menu. Do you still need help?

Heey, this is still an issue, when you open the menu from anywhere other than the landing screen on mobile, the drop down menu does not display correctly. Could you please check this out?

thanks!

Im also having the same issue with my site!

http://grandeurproperty.co.uk/stay/home

Now,I know this code is effecting it...

@media screen and (max-width:767px) {
html, body {
    overflow-x: hidden;
}
}

However, I have needed to add this to the site in order for my mobile nav to fit on mobiles correctly. It just stopped working properly yesterday, so the above code was a fix. 

If I could stop scroll on mobile menu this would be the final hurdle!

21 hours ago, fuzzykiwimedia said:

Im also having the same issue with my site!

http://grandeurproperty.co.uk/stay/home

Now,I know this code is effecting it...

@media screen and (max-width:767px) {
html, body {
    overflow-x: hidden;
}
}

However, I have needed to add this to the site in order for my mobile nav to fit on mobiles correctly. It just stopped working properly yesterday, so the above code was a fix. 

If I could stop scroll on mobile menu this would be the final hurdle!

I literally experienced exactly the same thing too but never found a work around to either problems.  Draining me i've asked everyone and tried eveyrthing! sorry!

On 3/25/2022 at 1:11 AM, moonlitdesign said:

I literally experienced exactly the same thing too but never found a work around to either problems.  Draining me i've asked everyone and tried eveyrthing! sorry!

Do you still need help? Recently I solved similar case for a member.

We use JavaScript to add a class to HTML tag, when overlay menu is open, then we can use html {overflow:hidden;} to disable scroll

This will require a Business Plan or higher

4 hours ago, tuanphan said:

Do you still need help? Recently I solved similar case for a member.

We use JavaScript to add a class to HTML tag, when overlay menu is open, then we can use html {overflow:hidden;} to disable scroll

This will require a Business Plan or higher

Yes please that sounds great!!!

On 3/26/2022 at 7:02 PM, moonlitdesign said:

Yes please that sounds great!!!

Add to Last Line in Code injection > Footer

<script>
$(document).ready(function() {
	$(".burger-inner").click(function() {
  $('html').toggleClass('disable-scroll');
});
});
</script>
<style>
  html.disable-scroll {
    overflow: hidden;
}
</style>

@tuanphan Your solution works well on Chrome and Firefox but does not function properly on Safari.

Any ideas how to fix that?

On 8/18/2022 at 9:23 PM, vincentlefre said:

@tuanphan Your solution works well on Chrome and Firefox but does not function properly on Safari.

Any ideas how to fix that?

What is site url?

@tuanphan

https://adrisenergy.squarespace.com/

password: 1234

I've actually noticed another problem with this solution on all platforms - If a link in the mobile menu takes you to a page-anchor within the same page you're on then the scroll functionality remains disabled.

Is there a more robust solution to this problem?

On 3/29/2022 at 10:23 AM, tuanphan said:

Add to Last Line in Code injection > Footer

<script>
$(document).ready(function() {
	$(".burger-inner").click(function() {
  $('html').toggleClass('disable-scroll');
});
});
</script>
<style>
  html.disable-scroll {
    overflow: hidden;
}
</style>

 

Hi Tuan, this doesnt work for me on my 7.1 website. Any suggestions? Thank you x

On 1/11/2023 at 10:27 PM, AkankshaK said:

Hi Tuan, this doesnt work for me on my 7.1 website. Any suggestions? Thank you x

What is your site url?

8 hours ago, tuanphan said:

What is your site url?

Hi Tuan! Thank you! I tried again today and I thought it worked but I didn’t 😞

https://www.purnamayurveda.com.
 

On 1/15/2023 at 5:13 PM, AkankshaK said:

Hi Tuan! Thank you! I tried again today and I thought it worked but I didn’t 😞

https://www.purnamayurveda.com.
 

Hi,

It looks fine on my end. You try checking it again on some devices

On 3/29/2022 at 5:23 AM, tuanphan said:

Add to Last Line in Code injection > Footer

<script>
$(document).ready(function() {
	$(".burger-inner").click(function() {
  $('html').toggleClass('disable-scroll');
});
});
</script>
<style>
  html.disable-scroll {
    overflow: hidden;
}
</style>

 

Hi I also cant get this working for 7.1

When I put the code where you say to put it, nothing happens. Any thoughts?

On 3/27/2023 at 6:46 AM, Dnm said:

Hi I also cant get this working for 7.1

When I put the code where you say to put it, nothing happens. Any thoughts?

What is your site url?

On 3/30/2023 at 12:01 AM, tuanphan said:

What is your site url?

Apologies for the late reply, its:

https://www.florescence-ny.com

On 3/27/2023 at 6:46 AM, Dnm said:

Hi I also cant get this working for 7.1

When I put the code where you say to put it, nothing happens. Any thoughts?

I don't see the code. Can you add it to your site? If you added, where did you add, can you take a screenshot?