I RECOMMEND AMENDING LINE 20: 19 // show-hide header with ease/transition 20 ooohBoi.header.style.transition = 'all 0.3s ease, width 0s'; Adding ", width 0s" to the property string will fix the header width from adjusting with the transition animation. The transition is great for the show/hide effect, but the translate animation is not desirable when the header width is scaling to fit different window sizes. In other words, this fixes the "delay" when the header width scales in or out. Hope this helps someone! Thank you, Oooh Boi for this amazing tutorial!
Hello, I really like your script but I have a problem with it. When resizing the browser window, the header stays at the smaller screen width and does not expand to full width. When reloading the page the width returns to 100%. Thanks for the great work!
Hey :) thanks for the JS snippet, it's such a great era we live in, when I can even ask ChatGPT to explain every line of the code in order to get a part of your deep knowledge that permitted you to write it :) GPT even helped me enhanced it a little bit in order to delay the offset so that when you scroll down only once when positioned at the very top (0) of the page, there's no "stuttle-ish inherit-body-color background" appearing during the 0.3s animation. Huge help !
As allways, Nice teacher voice, 100% clear explanations and more tips & tricks to make our live easy " oooh boi you are the best !!!!!!! " THANKS AGAIN
Hey Oooh Boi, Thanks for generously sharing. Where will the world be without 'a little help from my friends' ? Some people teach while others do. Oooh Boi can do both!
Afternoon greetings ooohboi, hope that I find you & your family all in good spirits 🙏🏾 You are a legend in your own rights ☺️ I had this video showing on my homepage this morning, decided to give it go and heh presto 👍🏾👊🏾 🤭 Keep up the good work, have a very blessed day, and thank you once again 🙏🏾 😃
You are so amazing!!! Among thousands of CZcams channels I found you very straightforward to the point approach and very nicely described content. I am already in love with your way of teaching....! Stay blessed.
Great channel. Learned a lot, so thx for that. But just wanted to bring to your attention that when using this code on Elementor`s new flex container there is a issue with scaling/responsivness. The header breaks when adjusting the screen size manually. If you ever came around to solve this issue, it would be much appreciated. Thanks again!
Thanks a lot. Very useful. I saw your blocks in the store. At first I didn't get what was so special about them. But when I started to switch between desktop and mobile ... oooh boi... I bought everything and since then I'm not only your fan but also a collector. Have a great new year!
It works! Tnx dude!! I have been looking for this solution for a long time. I don't understand why the elementor developers haven't included "show-hide" in the basic functionality of elementor\pro until now.. May be something wrong with my custom theme or Elementor version. Anyway, thank you!
This code is having some issues while the Locomotive scroll from your plugin is activated. The menu stop being sticky and is not appearing once scrolling up. Any ideas @Oooh Boi?
Great video, thanks for posting. However, sometimes when I am on mobile/tablet it goes up and bounces back down whens scrolling down. It works fine in the editor, but this error is on the live site. Any ideas?
Doesn't work for me... i have a transparent header with a negative bottom margin. If i delete the margin, it works. But then i don't have a transparent header...
Four years and this still worked okay! There is an error, and was wondering if you might have a solution? When I resize my desktop browser window to be narrower, the menu also becomes narrower and transforms into a 'tablet' or 'mobile' layout - as it should. But when I make the browser wider again, the navigation remains narrow, and the elements on the navigation (links, logo, buttons) all overlap. Is there a fix for this?
Great video! Thanks for posting. It works almost perfect. The issue i am experiencing is that the section does go up and down, but the menu stays at place (both desktop and mobile hamburger) as if it is not a part of the header. Could you please advice what might be the issue?
I don't know if you solved this yet but I experienced the same issue. The problem was that I had set the Sticky option of the Menu widget to Top. When I changed the sticky option on the Menu to none, it all worked like a charm.
Oooh Boi bro, might be just me but... mine is inverse! When I scroll down my header appears and when I scroll up it disappears? Copied your instruction to the dot! Any clue?
Great videos dude! I've been digging your channel for a while now and I've learned lots of interesting tips and tricks. One question on the show-hide menu though. Is there any way to make the menu appear as faded when you scroll up and you're not at the top of the page? Thanks for all your content :)!
PS: I just got one small issue: Everyhting works fine on desktop, but when scrolling down on mobile and stopping in the middle of the site, the header will come as we want, but then never leave again when continuing to scroll down :( when i scroll to the top back again and then down, it will work again. So once it appears again it will not leave, when i scroll more down :( why is that? thanks!
I didn't notice that mate. But I noticed that if you refresh the page when the scrollbar is off the page top, the header won't hide immediately but rather after you do some scrolling. And that's something I wasn't able to resolve. I know why it happens but just can't figure out solution.
It's really perfect done on elementor with js!! Do you have other tutorial teaching how to change the nav style by scrolling done to a specific Y-position? I think this will take js to active the style. (Actually I'm facing this issue right now😂)
5 star video again. Thank you for sharing. I am looking for a way to add a section above the menu (ie a full width image for a blog post) which will scroll off page on scroll but then the sticky menu would stay on (or off depending on scroll, like in this video). Would it be hard to do this?
Thank you for the great video! I'm just curious. Is it possible to: 1. Hide the header when user scrolls down; 2. When user scrolls up a little, don't show the header; 3. When user scrolls up a bit more, around 300px, then show the header. Thanks!
Hey, the code works great. except with Google Chrome. Does somebody has any idea? On Chrome it disappears when scrolling but only comes back at the top.
Awesome job. I have two sections. Topbar is 37px for languages and stuff and the bottom one (fixed menu) is the main menu. With js I get the main menu to show on scroll but is has the offset from topbar 37px for some reason. So basically there is empty space of 37px between browser top window and menu. Can you try to replicate it? Simply create two sections and make the bottom section sticky. Testing with chrome on windows.
How can I add CSS to this JavaScript so that only on scroll up there is a background color where as when no scroll at the top of page or scroll down the background is defaulted to transparent as that's what I have it set inside of Elementor? Great tutorial and thank you!
Thank you! I'm trying to repurpose your code for a button on my website. Is there a way to change the code so that my button slides in/out from the bottom instead of the top?
Thank you so much for this amazing tutorial. I don't know why, but it seems that your plugin creates a conflict on my site. The sticky header isn't working at all...When turning off, sticky header is coming back. i've turned off also all the developer elementor experiments and there aren't any "native" animations activated. I would like to use the plugin...
This is a great tutorial! I am a total beginner and your video ist perfectly understandable and made me getting this effect for the header I was looking for! Great work! However I found like some other user commented here, that using the mobile device it happens that when going up and down at certain points the header becomes sticky again and keeps like that. Than eventually when scrolling up and down more it might get its intended function back. Did you found something like this as well? Would be great to hear back from you!
I guess it's up to the mobile browser (maybe hardware). That show-hide effect has been written in plain JavaScript and I don't see any reason why it wouldn't be working. Thanks for your feedback mate, appreciated!
Great video, thanks a lot for all as I learn a lot! Your vids ar great! I do have an issue on mobile view front end as header is hiding but than appears even when I keep on scrolling down. Any solution? All the best
Nice ! Easy Peasy ! Thx for this tutorial ! it would be nice to have a video dedicated to custom css, especially to style the titles, see an example of style in the videos. For tips and inspiration;)
Would you happen to have an updated version of this code? It doesn't work anymore. UPdate: Nevermind, it works. I had the S capitalized in class id. Thanks for the video
Not sure buddy, did you check your page for JS errors? The browser Developer Tools might help you with, and in case there's an error, the script used here won't work.
Great tutorial! Thx a lot. I've bought it also. Any idea how you could shrink the logo when it is not at the top of the site? For example: show a smaller logo when scrolling up?
Well, the show-hide script doesn't actually detect whether the scrolling position is top, middle or the bottom of the page, it rather detects the scrolling direction. So, it can't be done by the default, you should extend the existing JS code towards that goal...
Thank you for the video. Very helpful. Question I want to apply break points to the nav menu because at certain screen sizes it doesn't get into humberger mode and is too long. How do I do that? Can it be a continuation of this video. Thank you.
There are two breakpoints supported by Elementor - by the default - when speaking of responsiveness. You probably know it already. However, you can define your own quite easily. Maybe another video of mine could help, at least for a while: czcams.com/video/mlvJwbA2mc4/video.html I have a list of tutorial topics that are about to come, one of them is quite close to what you wrote, however, my regular job does not allow me to publish those at a regular pace. I still can't make for living out of YT...
I didn't try yet but I don't think it could work... I mean, you're about to move the page HEADER to the footer, and the most likely all the content will make a sudden jump up in order to fill the gap in the page top.
idea for you addons for elementor, add this option in advance settings but with custom color for sticky menu, example if i create transparent menu but i need set sticky menu when scroll to add color for usability, you can add 3 or 4 option, color, gradient, image, video... this option will be unique and create comfort and easy use your addons
I already tried but this is something that goes beyond my knowledge. The problem relies in fact that somehow I need to be able to limit the option to the Header template only.
I RECOMMEND AMENDING LINE 20:
19 // show-hide header with ease/transition
20 ooohBoi.header.style.transition = 'all 0.3s ease, width 0s';
Adding ", width 0s" to the property string will fix the header width from adjusting with the transition animation. The transition is great for the show/hide effect, but the translate animation is not desirable when the header width is scaling to fit different window sizes. In other words, this fixes the "delay" when the header width scales in or out.
Hope this helps someone! Thank you, Oooh Boi for this amazing tutorial!
also
0.5s transition time looks smoother to me,
0.3 feels a bit sharp
Thanks so much - a real help - that fixed width issues for me when adjusting view width
Hello, I really like your script but I have a problem with it. When resizing the browser window, the header stays at the smaller screen width and does not expand to full width. When reloading the page the width returns to 100%. Thanks for the great work!
same trouble.. looks rediculous..
yeah ikr shit looks like an apple bezel
Bro, it's the first I use a "code" tutorial and everything works as expected. Thank you so much, I'm crying. Blessings.
Hey :)
thanks for the JS snippet, it's such a great era we live in, when I can even ask ChatGPT to explain every line of the code in order to get a part of your deep knowledge that permitted you to write it :)
GPT even helped me enhanced it a little bit in order to delay the offset so that when you scroll down only once when positioned at the very top (0) of the page, there's no "stuttle-ish inherit-body-color background" appearing during the 0.3s animation.
Huge help !
As allways, Nice teacher voice, 100% clear explanations and more tips & tricks to make our live easy " oooh boi you are the best !!!!!!! " THANKS AGAIN
Happy to help!
Hey Oooh Boi,
Thanks for generously sharing. Where will the world be without 'a little help from my friends' ? Some people teach while others do. Oooh Boi can do both!
You just saved me MANY forehead bruises and repetitive sighs. Works great! Thank you!
Afternoon greetings ooohboi, hope that I find you & your family all in good spirits 🙏🏾 You are a legend in your own rights ☺️ I had this video showing on my homepage this morning, decided to give it go and heh presto 👍🏾👊🏾 🤭 Keep up the good work, have a very blessed day, and thank you once again 🙏🏾 😃
You are so amazing!!! Among thousands of CZcams channels I found you very straightforward to the point approach and very nicely described content. I am already in love with your way of teaching....! Stay blessed.
Wow, thank you!
Great channel. Learned a lot, so thx for that. But just wanted to bring to your attention that when using this code on Elementor`s new flex container there is a issue with scaling/responsivness. The header breaks when adjusting the screen size manually. If you ever came around to solve this issue, it would be much appreciated. Thanks again!
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}); }); });
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
Thanks a lot. Very useful. I saw your blocks in the store. At first I didn't get what was so special about them. But when I started to switch between desktop and mobile ... oooh boi... I bought everything and since then I'm not only your fan but also a collector. Have a great new year!
Thanks mate! You too have a great NY!
It works! Tnx dude!! I have been looking for this solution for a long time. I don't understand why the elementor developers haven't included "show-hide" in the basic functionality of elementor\pro until now.. May be something wrong with my custom theme or Elementor version. Anyway, thank you!
This code is having some issues while the Locomotive scroll from your plugin is activated. The menu stop being sticky and is not appearing once scrolling up. Any ideas @Oooh Boi?
Thank you SO much bro, been looking for a solution to shitty old school headers all day. This works like a charm. $1.25 well-earned!
Great video, thanks for posting. However, sometimes when I am on mobile/tablet it goes up and bounces back down whens scrolling down. It works fine in the editor, but this error is on the live site. Any ideas?
same issue on my side, how could we add a trigger effect for tactile ?
Thank you so much! I looked everywhere to find a way to do this!
WOW! Works perfect, and exactly what I was looking for :) Thanks a lot! Great video!
Wonderfull ! Elementor should sponsor for such amazing tuto. Great Job !
Doesn't work for me... i have a transparent header with a negative bottom margin. If i delete the margin, it works. But then i don't have a transparent header...
How about this one: czcams.com/video/NOaFde0Yvy4/video.html
Four years and this still worked okay! There is an error, and was wondering if you might have a solution? When I resize my desktop browser window to be narrower, the menu also becomes narrower and transforms into a 'tablet' or 'mobile' layout - as it should. But when I make the browser wider again, the navigation remains narrow, and the elements on the navigation (links, logo, buttons) all overlap. Is there a fix for this?
This video should have more likes!!
It takes time... but THANKS on this one!
Great video! Thanks for posting. It works almost perfect. The issue i am experiencing is that the section does go up and down, but the menu stays at place (both desktop and mobile hamburger) as if it is not a part of the header. Could you please advice what might be the issue?
I don't know if you solved this yet but I experienced the same issue. The problem was that I had set the Sticky option of the Menu widget to Top. When I changed the sticky option on the Menu to none, it all worked like a charm.
Yes!! My fav menu on scroll flavor and style! 🙌🏻⚡️❤️📱💯👏🏻
omg , all my apreciation to you man, love from Romania
Legend. Working still.
One unique word "GENIUS"..INFINITE THANKS
Perfect video! Perfect timing! Thank you 🙌
Great! saved me a lot of work. Thank you :)
Glad it helped!
Exactly what I was looking for also. Works perfectly. Thank you so much.
Glad it helped!!!
This is great, just what I was looking for. Thanks a lot! :)
Excellent! Thank you for this. Very helpful. Your implementations and recommendations are so inspirational.
You are so welcome!
Yeah! I been looking for that for long. Thousand thanks!
Enjoy!
Thank you so much for this video. It's so helpful.
Thank you!! Works perfectly! 🙏🏾👨🏾🚀
Great to hear!
Oooh Boi bro, might be just me but... mine is inverse! When I scroll down my header appears and when I scroll up it disappears? Copied your instruction to the dot! Any clue?
Does not work. My header is stuck halfway up and it doesn't come back down again...
Any JS errors? You can check it out in the Console.
Great videos dude! I've been digging your channel for a while now and I've learned lots of interesting tips and tricks. One question on the show-hide menu though. Is there any way to make the menu appear as faded when you scroll up and you're not at the top of the page? Thanks for all your content :)!
PS: I just got one small issue: Everyhting works fine on desktop, but when scrolling down on mobile and stopping in the middle of the site, the header will come as we want, but then never leave again when continuing to scroll down :( when i scroll to the top back again and then down, it will work again. So once it appears again it will not leave, when i scroll more down :( why is that? thanks!
I didn't notice that mate. But I noticed that if you refresh the page when the scrollbar is off the page top, the header won't hide immediately but rather after you do some scrolling. And that's something I wasn't able to resolve. I know why it happens but just can't figure out solution.
Great video but i want same thing but in opposite way like hide header while scoll up and show header when scroll down, how can i do that please help?
Brilliant. You just made my day. Thanks a million!
Hi. Any option to make this without java? some plugins have visualizations issues when use java inside elementor. Thanks.
It's really perfect done on elementor with js!!
Do you have other tutorial teaching how to change the nav style by scrolling done to a specific Y-position?
I think this will take js to active the style. (Actually I'm facing this issue right now😂)
I am running into the issue where when I scroll back up, the header only comes back halfway. Do you know why this is happening?
Such a fantastic video. Thank you so much.
THANK YOU SO MUCH BROTHER!!!
Thank you for an awesome share. Very impressed.
Amazing and very helpful tutorials, keep it up. 👍👍👍
Perfect, direct to the point
Thank you so much! Works like magic!
Awesome 🔥🔥🔥🔥🔥🔥🔥🔥 thanks a lot ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ you saved my day dear 🙏
Glad to read I did!
5 star video again. Thank you for sharing. I am looking for a way to add a section above the menu (ie a full width image for a blog post) which will scroll off page on scroll but then the sticky menu would stay on (or off depending on scroll, like in this video). Would it be hard to do this?
Thank you for the great video! I'm just curious. Is it possible to:
1. Hide the header when user scrolls down;
2. When user scrolls up a little, don't show the header;
3. When user scrolls up a bit more, around 300px, then show the header.
Thanks!
Hey, the code works great. except with Google Chrome. Does somebody has any idea? On Chrome it disappears when scrolling but only comes back at the top.
Is it possible to disable the html on mobile? 🤔 the 'hide on mobile' does not work. Love to hear it.
Internal Server Error when I click "update" after entering javascript code. Any thoughts? I've taken all of the usual troubleshooting steps.
I also got an error by clicking the update button. Deactivated my WordFence plugin and then it worked :D
thanks Man! you're a savior
Perfect video and perfect timing! thx!
Glad it was helpful!
Awesome job. I have two sections. Topbar is 37px for languages and stuff and the bottom one (fixed menu) is the main menu. With js I get the main menu to show on scroll but is has the offset from topbar 37px for some reason. So basically there is empty space of 37px between browser top window and menu. Can you try to replicate it? Simply create two sections and make the bottom section sticky. Testing with chrome on windows.
Thnx friend, this video is the best bro, THANK YOU TOO MUCH
No problem, thanks for watching!
@@OoohBoi i understood everything and i dont know english jajaja you teach good men
How can I add CSS to this JavaScript so that only on scroll up there is a background color where as when no scroll at the top of page or scroll down the background is defaulted to transparent as that's what I have it set inside of Elementor? Great tutorial and thank you!
There's a custom class name "im-hidden" added to the header whenever it goes off the screen. You can use it to style the BG up.
Thank you! I'm trying to repurpose your code for a button on my website. Is there a way to change the code so that my button slides in/out from the bottom instead of the top?
Thanks for the tutorial, it works perfectly. But do you know how I would have to change the code so that it only affects the mobile view?
Works perfectly. Thank you so much.
Great to hear!
when I scroll back up there is a gap between the header and page? Is there anyway to fix this please?
Your website URL might help me identify the problem...
@Archie did you found the solution ? i have some problem
Thank you so much for this amazing tutorial. I don't know why, but it seems that your plugin creates a conflict on my site. The sticky header isn't working at all...When turning off, sticky header is coming back. i've turned off also all the developer elementor experiments and there aren't any "native" animations activated. I would like to use the plugin...
You are the best, man!
Veyr good tutorial thanks very much
This is a great tutorial! I am a total beginner and your video ist perfectly understandable and made me getting this effect for the header I was looking for! Great work! However I found like some other user commented here, that using the mobile device it happens that when going up and down at certain points the header becomes sticky again and keeps like that. Than eventually when scrolling up and down more it might get its intended function back. Did you found something like this as well? Would be great to hear back from you!
I guess it's up to the mobile browser (maybe hardware). That show-hide effect has been written in plain JavaScript and I don't see any reason why it wouldn't be working. Thanks for your feedback mate, appreciated!
You should just have a way I can give you some money, like a $10 tip or something.
You rock. Great resource.
Thanks, buddy! It's OK if you just buy the training file...
Great! Thank you.
Great video, thanks a lot for all as I learn a lot! Your vids ar great! I do have an issue on mobile view front end as header is hiding but than appears even when I keep on scrolling down. Any solution? All the best
its working Thank you if we do same changes in code then we can also hide the header on top scroll
All right then, glad to read it does!
Nice ! Easy Peasy ! Thx for this tutorial ! it would be nice to have a video dedicated to custom css, especially to style the titles, see an example of style in the videos. For tips and inspiration;)
Thanks for watching! As for the "effect", just use Developer tools to see how the title CSS looks like.
Would you happen to have an updated version of this code? It doesn't work anymore.
UPdate: Nevermind, it works. I had the S capitalized in class id. Thanks for the video
There you go! No need for an update...
Perfect timing..
GREAT! SUPER! but unfortunatly it is work only in elementor builder.... after publication it is doesnt work ( what i must make....
Not sure buddy, did you check your page for JS errors? The browser Developer Tools might help you with, and in case there's an error, the script used here won't work.
Incredible tiger😀
So great. It's perfect. Thanks Ooo Boi
I'm glad you like it, thanks for watching!
@@OoohBoi your Channel IS awesome.thank you si much
Great tutorial! Thx a lot. I've bought it also.
Any idea how you could shrink the logo when it is not at the top of the site? For example: show a smaller logo when scrolling up?
Well, the show-hide script doesn't actually detect whether the scrolling position is top, middle or the bottom of the page, it rather detects the scrolling direction. So, it can't be done by the default, you should extend the existing JS code towards that goal...
Awesome video Oooh Boi! please can do videos about transparent and shrink header:)
amazing bro!!! you are the real deal
Glad to help!
your script looks very good in oxygen builder
Oh, it's nice to know it 😁
Great video! Thank you for sharing.
Thanks for watching!
Why there is your pseudo "oooh boi" everywhere in the code ?
thank you so so much!
I love it, but not working on Safari...
Thanks very much. Just wondering, since the HTML code disappears when you select "in line", how do you find it later if you need it?
You can find the html widget in the navigation
hi very thanks for tutorial ! i have a little problem can make a video for you ? to tell it ?
Thank you for the video. Very helpful. Question I want to apply break points to the nav menu because at certain screen sizes it doesn't get into humberger mode and is too long. How do I do that?
Can it be a continuation of this video. Thank you.
There are two breakpoints supported by Elementor - by the default - when speaking of responsiveness. You probably know it already. However, you can define your own quite easily. Maybe another video of mine could help, at least for a while: czcams.com/video/mlvJwbA2mc4/video.html
I have a list of tutorial topics that are about to come, one of them is quite close to what you wrote, however, my regular job does not allow me to publish those at a regular pace. I still can't make for living out of YT...
EXCELENTTTT!!! THANK YOUUU
This is superb! is there a way to put it as a mobile like menu fixed at the bottom of the page?
I didn't try yet but I don't think it could work... I mean, you're about to move the page HEADER to the footer, and the most likely all the content will make a sudden jump up in order to fill the gap in the page top.
Hello, thank you. It works perfect and save a lot of time
You're welcome!
Thanks bro, perfectly working.
Thanks for the feedback!
Thanks, works great!
idea for you addons for elementor, add this option in advance settings but with custom color for sticky menu, example if i create transparent menu but i need set sticky menu when scroll to add color for usability, you can add 3 or 4 option, color, gradient, image, video... this option will be unique and create comfort and easy use your addons
I already tried but this is something that goes beyond my knowledge. The problem relies in fact that somehow I need to be able to limit the option to the Header template only.
Great tutorial! Great script! Thanks!
Glad you enjoyed it!
Thanks, man
Happy to help!
Great video. Keep up the good work.
Thanks a lot, now I need to resolve the color when I scroll down, because it's transparent, can you help me please?
Can't you just set the color in Elementor? Maybe I'm missing the point ... where I can check it out online?
Great video. Really appreciated