Just to update y'all, I highly suggest setting the Mobile Overlay's position to Fixed rather than Absolute, while keeping the z-index at the same high value. By doing so, the mobile overlay will still pop up even when you've scrolled down the page on a mobile device. When I tried this with the Absolute position, the overlay would just load at the very top of the page, rather than where I was on the screen. This would cause an error where the overlay wouldn't show up, but the page would still freeze due to the code. Other than that, everything else was perfect!
Hi Paul, I've followed all your instructions in the video to the letter and it worked great! After hand copying the code snippet you showed on the screen I couldn't stop the scrolling on a phone so I found some alternative code that seemed to do the trick. Here's what worked for me, all you need to do is change "mobile-link" in the code for the class used on the mobile button, also just add the open and close tags. Webflow.push(function() { $('.mobile-link').click(function(e) { e.preventDefault(); $('body').css('overflow', 'hidden'); }); $('.mobile-link').click(function(e) { e.preventDefault(); $('body').css('overflow', 'auto'); }); }); Thanks again, your video was extremely helpful!
Pro tip: You don't need to set up the second click animation by hand. Just copy the first click animation, rename it, swap the initial states with the final state animation and you're ready to go. This way you're done with it much faster and you avoid potential failures because of wrong typo :)
Great video, it's exactly what I was looking for. Can you post the code you mentioned and if possible also the share link, this would be a massive help in pulling it all together. Many thanks!
Hi Paul! Did you realize that in Safari browsers, both in mobile and desktop, when menu is opened the body scroll still works??? Any fix code to avoid it? Thanks!
Just to update y'all, I highly suggest setting the Mobile Overlay's position to Fixed rather than Absolute, while keeping the z-index at the same high value. By doing so, the mobile overlay will still pop up even when you've scrolled down the page on a mobile device.
When I tried this with the Absolute position, the overlay would just load at the very top of the page, rather than where I was on the screen. This would cause an error where the overlay wouldn't show up, but the page would still freeze due to the code.
Other than that, everything else was perfect!
Wonderful bit! Loved the end section with custom code. Brilliant!
Hi Paul, I've followed all your instructions in the video to the letter and it worked great!
After hand copying the code snippet you showed on the screen I couldn't stop the scrolling on a phone so I found some alternative code that seemed to do the trick.
Here's what worked for me, all you need to do is change "mobile-link" in the code for the class used on the mobile button, also just add the open and close tags.
Webflow.push(function() {
$('.mobile-link').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'hidden');
});
$('.mobile-link').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'auto');
});
});
Thanks again, your video was extremely helpful!
Pro tip: You don't need to set up the second click animation by hand. Just copy the first click animation, rename it, swap the initial states with the final state animation and you're ready to go. This way you're done with it much faster and you avoid potential failures because of wrong typo :)
You're a savior man! ❤️
my hero, thanks man!
Great video, it's exactly what I was looking for.
Can you post the code you mentioned and if possible also the share link, this would be a massive help in pulling it all together. Many thanks!
I know I'm crazy late on this response, but if you visit the link in the description I've included instructions on how to grab the code I am using.
How do you edit a mobile nav bar link? I have a link in the nav bar that only shows up in mobile view. Appreciate any Help!
Hi Paul! Did you realize that in Safari browsers, both in mobile and desktop, when menu is opened the body scroll still works??? Any fix code to avoid it? Thanks!
I wonder if there's a way to do this with symbols.
i feel like you skipped a lot of steps here, im lost at the hamburger menu part, idk how you put it together