As we go on the BBC Sport Website on mobile, they have a black Nav Bar that scrolls horizontally. How do we do this on Webflow, Desktop & Mobile ?? Please help! ☺️☺️
Thanks for the great tutorial. What is the proper way to write the code for this if I will be clicking .menu to open the menu and exit the menu. To confirm, I want the to open and close the menu by clicking the same button (.menu) twice... once to open and then again to close... Thank You :)
@@pixelgeek Hey guys! I am struggling with this as well. My menu trigger is simply a div block (not a link), and you click it once to open, and again to close. The class name for my menu trigger is "navigation trigger", in the code is that "navigation trigger" or "navigation trigger"? Does it need to be twice? once to toggle on, once again to toggle off? Here's what I have in the "Before Body" section: $('.navigation trigger').on('click', function(){ $('body').toggleClass('no-scroll'); }); $('.navigation trigger').on('click', function(){ $('body').toggleClass('no-scroll'); }); Thx in advance!!
@@chetorres5208 Hey Che, How did you get this to work? My webpage is still scrolling, and for the life of me, I can't figure out why! If you could help, that would be awesome!
@@pixelgeek Hey Nelson, I'm trying to do the same thing. Currently have a single trigger where the hamburger animates to an x. It doesn't seem to work. I tried the method that Che posted above. Any suggestions? Much appreciated!
Thanks a lot. I had one issue so for the hamburger menu and close button I am using a Lottie file so both the buttons are of the same class. How do I remove the CSS class on the second click
Hello, this is a great tutorial, everything works as normal except for the very first iteration of the animation when I load the page. For some reason, the Lottie animation is showing in the 'X' stage of the animation rather than the 'burger' stage. When I click on it, it opens the menu as normal and then closes into the burger shape, as desired, when I click it again. How I can ensure the Lottie animation loads as the 'burger' shape when the page first opens? Thank you!
@pixelgeek Is it possible to put this code within the Project Settings and it would work across the site or does it need to be applied to each and every page?
Great question. No you don't have to put a dot for the "addClass" or "removeClass" because it already knows it's a class. That it will be adding it removing 😁
Hi Nelson, Thanks for the info! I need a little help please. If my menu is opened from the bottom of the body I cant see anything on my menu screen. If its opened from the top of the body it looks good. How do I prevent the menu from scrolling with the body? Or have the body move back to the top when the menu button is pressed?
Thanks for this but a word of advice...either mark this video "advanced tutorial" or SLOW DOWN....I can't even see what you're clicking and what you're hovering over. You did like 10 actions in 20 seconds and even pausing the video I can't tell...just a tip
Hello everyone, first of all excuse my bad english. i have doc Google asked to translate. Why doesn't it work when I move the link block "menue" to a div block? "nav" then does not open! Can someone help me please ?
Hello folks! I know this video is 2+ years old and I'm wondering if things have changed since this time as I'm having issues making the no-scroll works... :'( I was also wondering if process was the same to target all the pages, in the "project settings" area... 🤔 Maybe somebody can help plz ? Best regards 🙏
Hey, everything works fine except for the non-scrolling effect. It even applies the class to the body and removes it, but I can still scroll. What could be the problem?
@pixelgeek Struggling with the stock navigation button requiring two taps to register the initial click. (Making hamburger interaction a pain, but leaving stock it still happensI think it's an iOS 13 bug. Does this have the same issue with your version? Does this one require custom code on nav links to close the navigation as well? I noticed hitting the back button on iOS will return to a page with the nav revealed. Thanks
Hi Nelson This code seems to make the entire page shift to the right when i open the menu. It's only started happening today, was working fine until yesterday. Any suggestions?
Im so close to making it work ! What if im using a lottie animation on my menu ? How do make sure the code works when i close the menu icon? I cant seem to scroll now when I close the menu.
Hi man! I love your videos!! I've done this - but I'm now struggling to edit the mobile version. I can't even make the container visible to edit it ! So live - it looks funky. Please let me know if you know how I could troubleshoot this!
thanks for watching! If you need any help with your projects, just join my community and post about it on the chat board: pixelgeek.community Hope to see you there.
thank for this video and i have something difference need to ask. i have only one button, so how can i remove class no-scroll when i click that button again, on other word, how can i make the second click remove no-scroll class? i dont know anything about code but im ready to learn more, please help me
Wow, i did it. with some research on GG and your Java @pixelgeek. this is the js i use var timesClicked = 0; $('.nav-burger').on('click', function(){ timesClicked++; if (timesClicked % 2 != 0) { $('body').addClass('no-scroll') } else { $('body').removeClass('no-scroll'); } })
@@thientritranngoc3715 🙏🙏 Thank you! Your put an end to a looooong "trying & publishing" morning, very much appreciate your sharing the solution. All the best!
@@thientritranngoc3715 hi mate, i have a lottie animated burger menu so i tried using your code but it didn't work. could be that i did something wrong with the code but do you mind having a look to help me out please?
So great Nelson! The scroll locking works great as shown in a desktop browser, but when I tried it on both Chrome and Safari in iOS it doesn't seem to work? Any ideas why and/or if there is a different work around for mobile?
pixelgeek yep I am still able to scroll up and down. After some additional Googling it sounds like iOS doesn’t recognize modifications to the body element so ignores the overflow:hidden class we apply. There are a lot of articles out there claiming to have solved it, but then others that say those ways are wrong haha. This would maybe be a great micro-update for Webflow to solve and become a native feature! I thought the current “Disable scroll offset when fixed” checkbox for the native Menu button setting did this already, but it doesn’t seem to work so maybe that’s for another purpose?
Hi @@pixelgeek! Thanks for your tutorial. Question; is there any update about the no-scrolling. I too a having issues with the code not taking hold on the site to prevent scrolling. Cheers!
@@coreymoen, @pixelgeek and anyone else who's looking for a solution to this (years later haha) I may have found a work around. Not sure if its best practise but seems to work for now. I used the same mouse click that opens the menu to trigger a 2nd animation that hides the rest of the pages content. No content: nothing to scroll. Then I did the same thing in reverse: use the close menu click to trigger an animation to show page content. If anyone sees issues with this let me know!
i love the audio proof of .no-scroll implementation ^^;;
thanks for the tutorial! awesome!
THANK YOU
I love your channel. Thx
Awesome, super helpful thanks dude
my pleasure :) Thanks for watching
Thank you! Now I can finally fix my website! lol
Glad I can help 😁
You saved me a semester. Thanks!
New Subscriber here.
thanks for subbing! :D I truly appreciate the support.
can you create a video on how to close the menu once clicked on a button in the full page. cant seem to get it to work
As we go on the BBC Sport Website on mobile, they have a black Nav Bar that scrolls horizontally.
How do we do this on Webflow, Desktop & Mobile ??
Please help! ☺️☺️
Thanks for the great tutorial. What is the proper way to write the code for this if I will be clicking .menu to open the menu and exit the menu. To confirm, I want the to open and close the menu by clicking the same button (.menu) twice... once to open and then again to close... Thank You :)
tried this and it worked...
$('.menu').on('click', function(){ $('body').toggleClass('no-scroll');
});
nicely done! :)
@@pixelgeek Hey guys! I am struggling with this as well. My menu trigger is simply a div block (not a link), and you click it once to open, and again to close.
The class name for my menu trigger is "navigation trigger", in the code is that "navigation trigger" or "navigation trigger"?
Does it need to be twice? once to toggle on, once again to toggle off?
Here's what I have in the "Before Body" section:
$('.navigation trigger').on('click', function(){
$('body').toggleClass('no-scroll');
});
$('.navigation trigger').on('click', function(){
$('body').toggleClass('no-scroll');
});
Thx in advance!!
@@chetorres5208 Hey Che,
How did you get this to work? My webpage is still scrolling, and for the life of me, I can't figure out why! If you could help, that would be awesome!
@@pixelgeek Hey Nelson, I'm trying to do the same thing. Currently have a single trigger where the hamburger animates to an x. It doesn't seem to work. I tried the method that Che posted above. Any suggestions? Much appreciated!
Thanks a lot. I had one issue so for the hamburger menu and close button I am using a Lottie file so both the buttons are of the same class. How do I remove the CSS class on the second click
Hello, this is a great tutorial, everything works as normal except for the very first iteration of the animation when I load the page. For some reason, the Lottie animation is showing in the 'X' stage of the animation rather than the 'burger' stage. When I click on it, it opens the menu as normal and then closes into the burger shape, as desired, when I click it again. How I can ensure the Lottie animation loads as the 'burger' shape when the page first opens? Thank you!
@pixelgeek Is it possible to put this code within the Project Settings and it would work across the site or does it need to be applied to each and every page?
Thank you!!
my pleasure :)
Thank you Nelson.
Question : so on the script we don't have to put dot before the class ( no-scroll ) , to tell the script to search for a class ?
Great question. No you don't have to put a dot for the "addClass" or "removeClass" because it already knows it's a class. That it will be adding it removing 😁
@@pixelgeek thanks nelson
Hi Nelson,
Thanks for the info! I need a little help please. If my menu is opened from the bottom of the body I cant see anything on my menu screen. If its opened from the top of the body it looks good.
How do I prevent the menu from scrolling with the body? Or have the body move back to the top when the menu button is pressed?
can you post your read-only link?
Doesn't work for me. :(
Awe it no longer works:(
this unfortunately did not work for me at all for some reason :(
Thanks for this
but a word of advice...either mark this video "advanced tutorial" or SLOW DOWN....I can't even see what you're clicking and what you're hovering over. You did like 10 actions in 20 seconds and even pausing the video I can't tell...just a tip
Hello everyone,
first of all excuse my bad english.
i have doc Google asked to translate.
Why doesn't it work when I move the link block "menue" to a div block?
"nav" then does not open!
Can someone help me please ?
You're amazing you saved me from plunging hours more into figuring out why my current full nav menu wasn't working right.
Is there a way to make the site open in fullscreen on load? Without having to press f11.
I pull up this video at the start of every new website
Thank you. Another great tip.
thanks for watching! :D I'm glad you're finding these short tips useful.
Hello folks!
I know this video is 2+ years old and I'm wondering if things have changed since this time as I'm having issues making the no-scroll works... :'(
I was also wondering if process was the same to target all the pages, in the "project settings" area... 🤔
Maybe somebody can help plz ? Best regards 🙏
yup. this tutorial is still relevant and works :)
Well done! Super helpful. Thank you
Hey, everything works fine except for the non-scrolling effect. It even applies the class to the body and removes it, but I can still scroll. What could be the problem?
Can you please post your read only link? I'll take a look at it when I can.
@@pixelgeek oh yeah of course. thank you marius-bauer-fotografie-60f30a.webflow.io/flyout-menu
I know this is a year old but I am having the same issue. I can still scroll after using the code as well.
Hey boys, same problem as Melanin Kode here... hope somebody can help us :'(
Another bullseye tutorial!
thanks for watching! :D Please let me know what else you'd like to learn.
Thanks so much for this! Helped me a ton!
@pixelgeek
Struggling with the stock navigation button requiring two taps to register the initial click. (Making hamburger interaction a pain, but leaving stock it still happensI think it's an iOS 13 bug.
Does this have the same issue with your version? Does this one require custom code on nav links to close the navigation as well? I noticed hitting the back button on iOS will return to a page with the nav revealed.
Thanks
can you provide your read-only link so I can look into this? university.webflow.com/article/sharing-your-sites-read-only-link
Protect this man.
Hi Nelson
This code seems to make the entire page shift to the right when i open the menu. It's only started happening today, was working fine until yesterday. Any suggestions?
can you post your read-only link so I can take a look?
Wow thank you for this!
Thanks for the tutorial, good job man.
Im so close to making it work ! What if im using a lottie animation on my menu ? How do make sure the code works when i close the menu icon? I cant seem to scroll now when I close the menu.
in the custom code write toggleClass instead of addclass
Awesome as always man! Thank you! :)
Hi man! I love your videos!! I've done this - but I'm now struggling to edit the mobile version. I can't even make the container visible to edit it ! So live - it looks funky. Please let me know if you know how I could troubleshoot this!
thanks for watching! If you need any help with your projects, just join my community and post about it on the chat board: pixelgeek.community Hope to see you there.
@@pixelgeek if that's where it's best for you to filter the questions for all the amazing information you provide, that's where I'll be!
thank for this video and i have something difference need to ask. i have only one button, so how can i remove class no-scroll when i click that button again, on other word, how can i make the second click remove no-scroll class? i dont know anything about code but im ready to learn more, please help me
Wow, i did it. with some research on GG and your Java @pixelgeek. this is the js i use
var timesClicked = 0;
$('.nav-burger').on('click', function(){
timesClicked++;
if (timesClicked % 2 != 0) {
$('body').addClass('no-scroll')
} else {
$('body').removeClass('no-scroll');
}
})
@@thientritranngoc3715 thanks a lot! I had the same problem
@@thientritranngoc3715 Thank you SO much for this!! You solved my issue as well! :)
@@thientritranngoc3715 🙏🙏 Thank you! Your put an end to a looooong "trying & publishing" morning, very much appreciate your sharing the solution. All the best!
@@thientritranngoc3715 hi mate, i have a lottie animated burger menu so i tried using your code but it didn't work. could be that i did something wrong with the code but do you mind having a look to help me out please?
So great Nelson! The scroll locking works great as shown in a desktop browser, but when I tried it on both Chrome and Safari in iOS it doesn't seem to work? Any ideas why and/or if there is a different work around for mobile?
Are you able to scroll up and down the page still or is the address bar the only thing expanding and collapsing?
pixelgeek yep I am still able to scroll up and down. After some additional Googling it sounds like iOS doesn’t recognize modifications to the body element so ignores the overflow:hidden class we apply. There are a lot of articles out there claiming to have solved it, but then others that say those ways are wrong haha.
This would maybe be a great micro-update for Webflow to solve and become a native feature! I thought the current “Disable scroll offset when fixed” checkbox for the native Menu button setting did this already, but it doesn’t seem to work so maybe that’s for another purpose?
@@coreymoen what?! That's lame. I'll look into this more today.
Hi @@pixelgeek! Thanks for your tutorial. Question; is there any update about the no-scrolling. I too a having issues with the code not taking hold on the site to prevent scrolling. Cheers!
@@coreymoen, @pixelgeek and anyone else who's looking for a solution to this (years later haha) I may have found a work around. Not sure if its best practise but seems to work for now. I used the same mouse click that opens the menu to trigger a 2nd animation that hides the rest of the pages content. No content: nothing to scroll. Then I did the same thing in reverse: use the close menu click to trigger an animation to show page content. If anyone sees issues with this let me know!
Nice tutorial ! 🔥🔥
Thanks 🔥
Niceee! Thx!
thank you for watching. 😁🙇🏽♂️
why is webflow so complicated & hard to use
I'm happy to explain in a future video :)
I've responded to your comment here :) ruclips.net/video/-2NkFbPHVng/видео.html