Jump to content

Stop page scroll on mobile when navigation dropdown menu is open

Recommended Posts

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

2023725572_Screenshot2022-02-02at17_44_44.thumb.png.3bc521a0a447437433b13dcf54f32026.png518529212_Screenshot2022-02-02at17_44_40.thumb.png.33e5e1f7f5fdf02176e14aa060bb7865.png

Link to comment
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. 

Edited by moonlitdesign
Link to comment
  • 1 month later...

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!

Link to comment
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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!!!

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
  • 4 months later...
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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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?

Link to comment
  • 3 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
On 10/27/2023 at 11:40 PM, daniellenoakes said:

Hi there, experiencing the same problem all of a sudden, have added code above but no change.
thanks!

 

www.kathrynbraunton.co.uk
pw: makeup

Use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$(".burger-inner").click(function() {
  $('html').toggleClass('disable-scroll');
});
});
</script>
<style>
  html.disable-scroll {
    overflow: hidden;
}
  .header-menu-nav-folder[data-folder="root"] {
    overflow: hidden !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.