It’s especially apparent on the ‘Selected Work’ pages because they are quite long pages.
Might anyone be able to help?
Also & I’m not sure if this complicates matters much or not, but: it’s a full-page overlay on mobile, but on desktop it only takes up a portion of the viewport at the RH side, and I’d still want the user to be able to scroll down in that scenario - will that affect things?
Amazing @philippe thank you! I wasn’t pasting it into the footer section before, which might have been why it wasn’t working. Either that or I had copied it wrong.
To get it to work on my site I just had to change the 2nd mention of hamburger-menu to target my cross icon instead. And now to get it to work only on mobile I will just duplicate the classes and make one of them visible just for mobile, rename it, and target that one only so the user can still scroll on desktop when the menu is just at the side.
Ahh actually this doesn’t seem to be working for me on Safari on iPhone - just when resizng the desktop browser to mobile size. I also added the second script too but still not working. Thank you anyway though!
Thank you so much for this, Philippe! Is this working for you on iPhone? For me when I view on desktop (even at a mobile-sized viewport) it works perfectly, but on actual iPhone Safari I can still scroll. Maybe it’s an iPhone thing…
I did try adding this script from another poster as well which supposedly fixes it, but it doesn’t work for me:
var fixed = document.getElementById('fixed');
fixed.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
@philippe THANK YOU! It was adding the ID that was the thing for mobile - I didn’t notice that at all in the javascript (as I don’t really know how to read it) but now looking back it does pretty clearly say ‘.getElementById’, haha.
If anyone else stumbles across this - I had to add the ID of fixed to my overlay, not the button itslef which was what I tried first.
I tried adding the “fixed” id to the navbar, and to the open menu itself, and nothing. Perhaps is the code I’ve pasted that’s no well structured. Did you pasted both one after the other?
Hmm… I’m not entirely sure. Can I just double-check you’re publishing the site and not just checking in Preview mode? As it will need to be published for custom code to take affect.
I’ve tried implementing your suggested script with a selector, but it doesn’t seem to revert the body’s overflow back to “auto” after being “hidden” from the initial function.
Within the same function that animates my SVG button, I just added the body (after a multiple selector - i.e. “,”) and, in the same way as the animation, toggled the class (“overflow-hidden”) with .toggleClass.
This also meant I could remove the 10 lines of code as seen in my previous post. I am COMPLETELY new to this however, and so this likely isn’t best practice, but it seems to work…
You mentioned in a post that custom code in the footer is critical. I am not sure what you mean, as custom code only offers sections for header and body on the Page section. Beyond that your clone doesn’t offer seeing the footer code, as project setting code is not offered on clones to my knowledge. Could you please explain? Thanks in advance;-)
could this be anymore complicated? there are 5-6 forum posts on this issue, and dozens of custom scripts, which seem to work for people about 30% of the time, and only on some browsers or some devices. would like to see webflow solve this out of the box. very basic requirement, people complaining about it for 3+ years.