 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 with Elementor, 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 tutorials so you can combine both of them. But you know what's even better? 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 and 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 to. Okay, so select on edit section, go over to advance, 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 could 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 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 going to 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 what 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'd 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 will 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 0.4 which is 0.4 seconds. I find this is a good speed right here but you might want to 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 can do something like 1 second and I'll show you real quick. Let's put 4 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 it. See how it takes 4 seconds to go up all the way and go down as well. So you could adjust this right here if you want it to go fast. Do like 0.1 seconds if you want something really zippy. You see it's almost instantaneous. So I like a little bit of a transition. I'm going to leave it at 0.4. 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 style. Okay we're going to have to fix that up a bit. Alright 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 advance 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 we can see our mobile menu is also now hiding when we scroll up and then 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 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 it'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. 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 and you want to learn more about building things and improving your website skills make sure to subscribe. 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'll respond to everybody because this is all for you. I really appreciate it. Thank you and I'll see you again soon with more Elementor and web design related content.