Elementor Sticky Headers: Hide Header on Scroll Down, Show On Scroll Up

in this tutorial i'm going to show you how to create an elementor sticky header that hides whenever you scroll down but then reappears when you scroll up and we're going to make this tutorial super easy that even an absolute beginner to building websites is going to be able to achieve this effect using elementor what's up everyone i'm jeffrey at lightbox and i want to give a big shout out to design so simple who gave these ideas after i dropped the last video on creating a fully shrinking header so if you have any ideas and you want to see me create any other type of effects or elements or anything else any questions drop them in the comments and i might choose yours for my next video one thing to note is that this is a follow up to last week's tutorial one that i made on creating a fully shrinking elementor header and nav bar now you can combine both effects and it's pretty awesome when you do it looks really great i'll leave a link in the description to the other tutorial so you can combine both of them but you know what's even better if you just go ahead and subscribe so that way you can check out all my videos and get notified when a new one comes out it's much appreciated all right so let's go ahead and jump into elementor and have some fun for this tutorial we're going to be using this landing page in this header right here now if you want to learn how to make a header that looks like this and how it shrinks the way it does on scroll check out the last tutorial that i made i'll leave a link in the description it goes through in depth a lot more step-by-step on how to make a sticky header and then how to add an effect like shrinking to it and then you could combine that effect with this tutorial right here we're not going to go too much into depth on this tutorial because i want to make it go a lot quicker so first thing we want to do is go over to edit with elementor and then edit your header and then from here we want to select on the section or container depending on the version you're using and you want to select the one that you want to hide and show now this is important to know that you could only have one section or one container hide and show this effect only works on one so you can't use two of them we'll go into mobile at the end i have to do mobile a little bit different than what i did on my last tutorial i'll show you how to do that as well though we'll make it really easy too okay so select on edit section go over to advanced and then we need to add a css id and we're going to call this one hide header hide dash header all right with that go ahead and select on update the only thing that we're also going to need to do is we got to make sure our header is sticky so we got to go to our section up here and if you're using container it's going to be the same thing then you're going to navigate over here to motion effects and make sure your sticky is set to the top now you can choose if you want it on desktop tablet and mobile we're going to do all of them right now because i do want to show you how to make this effect on a mobile as well but the rest of the settings like this effects offset and how we built the header we're not going to go into that on this tutorial i suggest checking out the last tutorial as we go through all those in more detail and also say you already got your header you already built it you're good to go you don't want any other effects you just want to do the hiding and reappearing then all you need to do is make sure you got it on sticky it's on the top and then make sure that you got the css id right here and that's it the next step is we need to add a snippet of code now don't worry about not knowing code it's all good all you got to do is copy and paste it i'll show you exactly where to put it there is a link in the description which will take you to this page which is a blog tutorial for the same effect right here so you're gonna find this code underneath the javascript go ahead and copy and paste this code right here and we're going to put this in a different place and i'll explain why so where we want to put this at is going to be in the footer of all of our web pages so go over here to your dashboard go over to elementor and then to custom code from here select on custom code add a new one and we're going to put this at the body end which is going to put it inside the footer you can go ahead and leave this off since we are not using jquery go ahead and paste that inside there click on publish leave it on entire site save and close now the reason why we are adding our css here is whenever we put javascript or a code file that doesn't need to load right away we add it at the footer of our web pages it improves the load time because the web page could show without it having to load it we don't need this effect to load right away so i try to put as much as i can in the footer and this is one of those times i would put the javascript snippet into the footer now let's go back to our site select on refresh and we can see it's already working and that is it it's really simple just like that the only part you're going to need to edit inside the javascript is going to be this part right here the minus 80 pixels now what the 80 pixels is this is how much how high your header goes up to hide above the screen so you're going to want to match this with your header height say for an example right here i'm going to put 60. let me update that and let me go back over to my my site now you can see it's kind of showing you know you see because it's not high enough so what we would do here is we would go back and we would start to increase this to get to the right number of pixels that is the height of our sticky header now you can see it's hiding all the way above the screen so that's the only thing you need to do now the next thing you need to do is we got to add a little bit of css so let's copy and paste this right here and i'll explain why we're going to add this so copy it and i'm going to put this right here because i want it all to be together i just want everything for my hiding header in one section if you want to put the css somewhere else and you're more comfortable with css go for it it's all good it could work in other places as well only the javascript i would make sure to keep here in the footer so inside the css what this does is this is going to change the speed of how quickly the transition of your header goes up and down so right now we have it at a point four which is point four seconds uh i find this is a good speed right here but you might wanna speed it up if you want to speed it up you do something like 0.2 seconds if you want to slow it down you could do something like one second and i'll show you real quick let's put four seconds right here let's update this and i want to put something really big so it's like easy to see now look at see how it takes four seconds to go up all the way and go down as well so you could adjust this right here if you want to go fast you can do like point one second if you want something really zippy you see it's almost instantaneous so i like a little bit of a transition i'm gonna leave it at point four i think that's a really good place to put it at that is it for creating the hiding and reappearing menu on desktop now if you are following along from the last tutorial and using the shrinking menu on top of it there's something we got to do a little bit different when it comes to the mobile so let's create this for the mobile effect as well normally i like to keep my desktop header and my mobile header separate it just allows me to have more flexibility but in this case we can't do that we got to have them all in one section because only one section can hide we can't do it with both one is going to override the other with the javascript that we are using so you can see here i got my mobile menu and then i got my desktop so what i'm going to have to do is delete this one right here and then just make this work in the mobile as well so i want to do this in case if you are following along from the last tutorial as well so the first thing i want to do is let me copy and paste the style so i can match this mobile style to this mobile menu right here let me open that back up copy and paste out [Music] okay we're going to have to fix that up a bit all right we're good right there so let me go ahead and just delete this now because we don't need it what i do need to do though is select on edit section go over here to responsive and make sure this shows on each one now i want to hide this button right here because if we go down to tablet well it's just going to be a little too much right here so i'm going to go here to advanced then to responsive and i'm going to hide on both and then we can't see it right here but because this is not going to show when we look at the live version this should go all the way over to the right and then same thing on mobile and here on our mobile view you can see our mobile menu is also now hiding when we scroll up and down when we scroll back down it appears and that's it it's super easy to do anybody could do this and you might be wondering why will we even add an effect like this well this really helps out for the usability it opens up screen space it removes distractions and it's really a good thing to use for ui could really improve the ui especially depending on some websites some websites have a lot of things going on inside their menus and inside their headers and maybe you got a funnel that you want to guide your users to for some sort of call to action so when you remove the distractions and people are scrolling down well that's going to help out to help the website user to focus more on where you want them to focus to and then when they scroll back up and they are able to see the navigation well that also improves the ui because now it makes it a whole lot easier for your website user to navigate well i hope this video helps out and if you notice i'm always trying to drop some design gems i like doing elementor tutorials they're fun i love elementor it's like i'm always discovering new things that i could do with it and i want to share it with you all but i also want to show more on the design part and understanding it because it's really important to understand why do we do the things that we do that way when you finish a tutorial like this not only are you going to be able to put a really cool header on your website but you're going to know more you're going to understand more that's my goal so if you want to learn more about design you want to learn more about building things and improving your website skills make sure to subscribe you know do all that good youtube stuff it really does help and leave comments if you have an idea for anything i'm listening and i respond to everybody because this is all for you i really appreciate it thank you and i'll see you again soon more elementor and web design related content you

Channel: Jeffrey @ Lytbox

Views: 46,812

Keywords: show hide header on scroll in elementor, hide menu on scroll, hide header on scroll, show hide menu on scroll, elementor sticky header effects, elementor pro header tutorial, elementor sticky header, Sticky Header That Hides on Scroll Down & Appears in Scrolling Up With Elementor, Hide Header on Scroll Down, Hide Header on Scroll Down Show On Scroll Up With Elementor Sticky Headers, elementor header sticky, elementor header tutorial, elementor pro, elementor tutorial

Id: -Tci1o2T7Ms

Length: 12min 11sec (731 seconds)

Published: Wed May 18 2022