 In this video, I'm going to show you how to make a fully shrinking header and NavVar just like this. And when I say fully shrinking, I'm talking about everything is going to shrink. We're going to have the section shrinking, your logo is going to shrink, the menu and even the call to action button is going to shrink. We're going to make this really easy so that way anybody following along can make this on your own websites. And we are also going to do this for mobile as well. So both desktop and mobile. What's up everyone? I'm Jeffrey at Lightbox and I want to give a special shout out to Aileen and Leandro and many others as well who left comments in one of my last shrinking menu videos for the ideas to add more shrinking effects and to make this for mobile as well. So if you have any ideas, drop them in the comments as well. I might just choose yours for my next video. Okay, let's go ahead and get started and have some fun. For this tutorial, we're going to be building a header for this landing page. Now, just a heads up, I do have a new series coming up called designing with elements or where I'm going to be showing how to design landing pages like this. So if you're interested in developing and learning more design skills with elements or make sure to subscribe and all that good YouTube stuff. All right, so let's start off by creating a header to do that navigate over to your dashboard and then go over to your templates to your theme builder. If you already have a head header built, there are timestamps in the description so you could jump ahead. All right, from here, go ahead and click on add new and then let's add a new header. Now it's going to take you right into the editor. The first thing I always do is we're not first off, we're not going to use any of the templates or want to build our own because it's pretty easy to do. But the first thing I like to do always is going down to my settings and giving my template a name because, you know, it just has this generic name elements or header with a number and then it could get really easy to start to confuse things. So I want to keep everything clean and by doing that, let's give it a title. We're going to call this sticky shrinking header and I already got it right there. All right, cool. So the next step is let's add a section and put all of our elements in it. Now, I did build this out with containers and I was going to do the video using the new elements or containers, but it's still in the alpha beta stage. And at the time of making this video, there are some pretty big bugs in it, which made it not really usable, but I did test this out in containers as well as how we're going to do with sections and it works in both. All right, let's add our elements inside here. So we're going to add a logo. I'm going to use an image widget for my logo. I prefer using the image widget. I just feel like it has more flexibility to it and I prefer it. All right, so let me add our logo image here. I got one is down here at the bottom. Let's insert that. Let's give it a link. Let's make sure we link it and have the link that goes to home to do that. Just put in custom URL and put a forward slash. That's all we need. And let's go ahead and just give it a size. I'm going to give it 150 pixels. All right, next up, we're going to put our menu. So I'm going to add the nav menu here. Now, I created a couple menus. I got one just for this landing page right here. I'm going to use a sticky menu. And next, let's put a button that's going to be our call to action button. So I'm going to drag and drop that here underneath our menu. And this one, we're going to call it download. All right, you can put your call to action, contact me or whatever you want that to be. You could even put two call to actions. There's a lot of flexibility to this. We're just going to start with this basic type menu right here. Next, let's go ahead and use flex and make everything line up. Now, we're going to do everything in one column. And we should always try to use either just one column or one container. The less that we use is always a better because it's going to make the code in the back end behind everything a whole lot cleaner, which is going to make your website faster. So to do this, let's go over to each element. I'm first going to go to my image. I'm going to go over to advanced to width. And I'm going to put it in line, which is now going to make it just the size of the widget by default for all 100%. And I'm going to do the same to our menu with in line and then the same to our button. With and in line. So now everything's in one line and we're going to use flex box. And we're going to make everything spread out and look even. So to do that, we're going to go over here to our column. And if you're using containers, it's very similar. You just have more options in the containers. So click on edit column. First thing is we want to go to vertical line and we want to align it to the middle. And that's going to make sure everything is even inside the middle here. Next up is horizontal line and we want to make it space between. That is going to make it so the very first element is all the way to the left. And the last element is all the way to the right. Now I encourage everybody to play around with these to really get familiar with these flex options here. And when containers is stable and is out, that is going to be the future of how we're going to be building everything. To get really familiar with how to use flex within containers. But this is a good start. The containers just gives you a lot more options, which has a lot more power. All right, cool. So next up, what we want to do is we want to style everything up. Now I'm not going to style everything here because that's going to take some time. But I do have the designing with elements or videos coming out that are going to be more showing in depth on how to style and design things and taking you through my design process. What I'm going to do is I'm going to go to the menu I already have built. I'm just going to copy and paste the styles in. So I'm going to start with my image. I'm going to paste style. I'm going to go over here to my menu. I'm going to copy it. I'm going to go to this one and paste the style. And then I'm going to do the same thing to the call to action button. Copy it and paste the style and same thing for my section. Copy it and paste the style. All right, cool. So our menu is built. This is our desktop menu right here. If you go and see the one I already have built, you see another one here. I'll show you that in a minute. So let's start with the top and work our way down. We're going to be shrinking for different elements. We're going to be shrinking our section. We're going to be shrinking our logo. We're going to be shrinking our menu and then our call to action button. So to start off with, let's go to our section. Now on my section, you can see I have spacing on the top and bottom right here. If I go over to advance, you'll see I have padding 12 pixels all around. So make sure to use padding on your section for your header right here. And what we really want to focus on is the top and the bottom. There's a couple of other things I did. I gave it a Z index of 100. Make sure you give a Z index here. That's going to make sure your menu is on top of your webpage. And then you got to give a CSS class of shrinker. We are going to need to copy and paste a little bit of CSS. But don't worry, I'm going to walk you through all that. It's going to be super easy even if you don't understand CSS. Next up, we're going to go over to the logo. Let's edit your logo or edit your image. And we just need to add this CSS class right here, the shrinking logo. And I'll explain more on why we have to add a class here. But then on your menu and on your button, you don't have to do anything at all. You're good to go with them. Next step is we want to make our header sticky. Now to do that, go over to the section that you have everything wrapped up in. Select on edit section, go over to advance, down to motion effects. And from here, you want to go over to sticky and select on top. Now you got desktop, tablet, and mobile. Choose what you want to use this for. We're going to do this tutorial for all three. We also are going to build a sticky menu for our mobile version. The one thing we do need to change, first off, leave the offset at zero. Don't touch that. What we need to change is the effects offset because this is where the magic happens right here. So for example, we're going to put 60. What this means is when the page scrolls 60 pixels, that's when our effects are going to kick in. That's when the shrinking is going to kick in. And you could change this. You could make it 100. You can make it 200 if you like. I find a sweet spot is anywhere between 60 to 120. But play around with it, find what works for your design. All right, so we're going to leave this one at 60. I'm going to update this. And now let's take a look at the front end. Now we have our sticky menu here, but nothing happens when we scroll on it. Oh, by the way, I forgot to tell you, I got a little surprise in here as well. I combined an extra effect I'm going to show you to probably should have mentioned that in the very beginning. We're going to change the background color on scroll as well. So this is going to have quite a few things in here. That's why it's taken a little bit longer, but it's all good. All right, now to get started, we got some CSS. We're going to have to copy and paste in here. Now I'm going to pull in my CSS here, and here is our CSS. Now there's quite a bit, but don't be overwhelmed by it because you're probably going to not need all of it. I've broken each of them down into sections. So we have this bit right here that we copy and paste in, and this is going to shrink the section, and it's going to shrink the overall section wrapper. We have this little tidbit right here, and this is going to shrink your logo image. And we're going to go through each of them as we apply it to the site. We have this small section here. This is to change your nav menu to make that shrink and get smaller. And then we got one for the call to action button as well. And then here inside the overall section, I also threw in how to change the background color of your menu as well. So let's start off with this one. We're going to go from top to bottom, go through each one of them because I want to show you how to edit them as well so you could adjust it for your own site. So from here, we're going to use the customize. Now I'm very vocal about this. I really believe CSS should be kept all in one spot, should be made organized, and that's why I use either the customize section, you could use a plugin if you want, or if you want to put it in elements, or if that you go up here to your site settings right here, and in your site settings, then you would go down here to your custom CSS and put it in here. We're going to use this for this tutorial. I'm going to start off with the section. Now, right now you can already see there's a shrinking effect right here, and you can also see it's turning white. There's one thing I want to do, hold up, I forgot to do something. I forgot to move my web page up. So let me edit this real quick, edit the page with elements or, because I wanted the menu to be transparent. So I'm going to select on edit section here, let me go to advance, and I'm going to move the margin up underneath our menu. So that way we have the transparent menu. There we go. Let me update that. There we go. All right, I could close this down. So now we have a shrinking menu, let me open up the customize back to our CSS. All right, so we have two things happening here. We have a little bit of shrinkage happening, and then we have the color changing to white. Now, in order to do this, if you want to have a transparent background like this right here, say you want your menu on top of whatever graphics on your banner, right here in this first section, and remember using shrinker, that's the class we gave to our section, you're going to put in the background transparent just like this, you can leave it. But if you aren't using a transparent background, let's say your background is just white, you would go ahead and change right inside here to the color code for white, which is FFF, or whatever color code your background is. All right, so the next thing we're going to have here, this is wherever you see element or sticky effects, this is the class that appears after you scroll down a certain length of the page where you set for your effects offset. So this is where we change everything. So first off, we're going to change the background color. So these two right here, this one and this one, you could adjust to as you want. If you want the background color to change to red when you scroll, let's just go ahead and put in red. Now it's going to change to red. You could change the color to whatever you like just by editing right inside here. I'm going to go back to white for this video just to keep it clean, but play around with this. So there's a whole lot of flexibility. Now here is where we're going to make a shrink. That's going to be the padding top and the padding on bottom. If we go back over to our section, let me click on it. You see we have 12 pixels on top, 12 pixels on bottom. So we want to shrink these on scroll to shrink them. You're going to go right here and put whatever pixels you want it to shrink to. So maybe I want it to grow. Look at this, if I put like 22 and 22 which is bigger than 12, you see it's actually going to grow. So you could adjust these around right here. I would adjust these and then your backgrounds as well to get it to what you feel like it's going to fit in. And if you're not comfortable with CSS, it's all good. All you got to do is just make sure you don't like break this like you got to make sure you have this colon and the semicolon right over here. Now I added a few other things. I added the box shadow right here. That way it just gives a bit of depth. It's totally optional. I would personally use this on our websites because I think it's important to have that little bit of depth that separates the menu from the webpage. And then the transitions right here. This is what makes it have that smooth look and feel. So the reason why we have that is so it isn't a sharp change. It kind of just animates into it. Next up, let's do our logo. So I'm going to copy and paste this and everything is inside the description. You can find all the CSS. There's a link to take you to all the CSS in there that is also broken up, made easier to use. I'm going to copy and paste that. All right, so for the logo, I needed to work around. That's why we had to add an extra class and only the logo because it's an image I found the transitions weren't really working. We need to set the width right here. So if we go back over to our logo and we click on here and we go to our style, you can see we set a width on it. We need to replicate this width. So say if your logo is 200 pixels, if you want it to be 200 pixels, then here you need to make sure you put 200 pixels. So that way it's the same size on both of them. It's the only way I found to fix it so that way it has a smooth transition. All right, we're going to put this back at 150 because it looks good at that size. You don't have to change anything here in the transitions. You can leave them as it is, but right here this is where we're going to change our size for our logo. So I made this 120. Now if I go up, you can see it shrinks. Now if I want to take it to like 20 pixels, it's going to go super small. So all you got to do is adjust this number right here, pixels is width, and then make sure you set your initial width for your logo. Let's go ahead and shrink our menu. Just going to copy and paste this little snippet. Now the menu and button, they're a whole lot easier. Let me go ahead and paste that there because they really don't need much to it. Now if you scroll it, you're going to see it goes a little bit smaller. The font sizes changed just a little bit. If we go back over to our menu right here, let's click on our menu, go over to style and to our typography, you're going to see we're at one REM. Now I use REM. I used to use pixels, but I don't use it anymore because REM is best for accessibility, is better that if somebody, you know, they need to see things bigger, they zoom on the webpage, well the text will go with that zoom. So I use the REM and we got one REM. Here we have the font size at 0.9 REM. So I'm just going to shrink it just a little bit. We don't want to shrink the menu too much where it's unreadable, but just enough so that way it has a good enough of effect to it. Because right here you could go, let's say we got 0.9, we could go down to 0.5. You can see it gets even a whole lot smaller. So feel free to adjust that to what looks right for you. All right, next up let's do our button. Copy and paste, and it's just like the menu. It's a whole lot less, we don't need much to it. Now if we scroll, we can see the button getting smaller. All right, so we could do this if we go over to our button, let's go to edit and go over to style. And it's going to be the padding. This is where we're focusing on to shrink our button. So initially right here I got 16 on top, 16 on bottom, 48 on left and right. So right here all I did was reduce the padding on top and bottom. The first number, this is the top. So I got 10 pixels on top and bottom where here it's 16. And then over here I got 32 pixels on right and left where it was 48. So it has a smooth transition right here, has a smooth shrinkage to it. So one thing that's important here, don't make it shrink too much, but try to like find that sweet spot. You know, none of these that you shrink, you never want it to just shrink too much. You want to make it look subtle. The more subtle, the better it is that's going to be on the user experience. So that is it for desktop. We have a fully shrinking nav bar here for desktop. And you can pick and choose. You might not want to shrink everything. Maybe you just want to shrink the section. So that's why I broke everything down. Just take what you need. Let me show you how I build a mobile menu and how you could put this effect on your mobile. So I'm going to go back over here to my menu. What I'm going to do here is I'm going to go to my section and I'm going to duplicate it. All right, my section right over here. First thing I'm going to do for my desktop one, I'm going to leave it at top. I'm going to go to advance, over down to responsive and I'm going to make sure the hide on tablet is on and hide on mobile is on. I want to hide those. Then I'm going to go to my menu for my mobile. I'm going to go to the section for the mobile. I'm going to go to advance to responsive and I want to be able to show on tablet and mobile but I'm going to hide it on desktop. So now if I were to go here, go to responsive mode and switch it over to tablet and then the same thing on mobile. You can see that the top is hiding and the bottom is showing. So we first need to fix this up. So let's go ahead and remove our call to action button. I'm going to delete that. Now I want to go kind of quick. So instead of styling this one up, I'm just going to copy and paste it from the one I have built. So here's the one I already have built. I'm going to copy this. I'm going to paste the style here. All right, and all I did was change the styles. Again, I'm going to show more of how to design and style things up in my designing with Elementor videos. And now if we click on here, you see we got a dropdown menu. Now, if you want to build a more creative menu like a slide out menu using popups, I did create a video on that. I'll leave a link to it inside the description. We're good here on tablet. Now let's check out mobile and you can see we're good here on mobile as well. And next, we need to add a little bit of CSS right here for our mobile and tablet view. So I have a snippet right here for tablet and mobile. Let's go ahead and copy and paste this. All right, so we got that in there and let's test it out right here. I'm going to, let's go ahead and turn this into the mobile version. All right, here we go. We got a mobile view right here. And as we scroll up, we can see a shrinking effect right here. Now on the phone, I always suggest testing it out on the phone as we're adjusting it. Every time I'm doing mobile design, I kind of get a good eye for it right here, putting in a mobile view, but it always looks a little bit different when you actually are working with it on the phone. So we got that working here. Let me walk you through what it is. What we have right here for our tablet and our mobile version is I gave the options in here to make changes just as we did in the CSS above for each one of our sections for when the window gets smaller, for when we have a smaller screen. So if we go down here, you see I have a broken down for the background. We have one broken down for the image, one for the menu, and then one for the button. Maybe you want to choose to keep a button. Right here, I don't have a button. So in a case like this, I will completely remove it. So I would probably just delete the button right here. But if I did want to have a button on there, I can make the button even smaller. Maybe I want it to be like eight pixels by 20 pixels. So you have more control on making each one of these elements even smaller for when it's on a smaller screen size. Now, the one you probably will use the most when it comes to mobile for the shrinking is going to be the image. And that is right here, your shrinking image. This is the one you're probably going to use, the only one that I find really effective. And that's because you could actually make your logo a little bit smaller when it's on mobile. You don't need it as big as you need it on the desktop. So like, for example, on this one, I have it at 100 pixels when we scroll down, which makes it a whole lot smaller. The rest of these, the shrinking menu and the background right here, you can use it if you like. I leave it there so that way you can play around with it. Maybe you want to make the padding even smaller. Maybe you even want to change the background color just for your mobile. So there is an option on here. I'm going to let you get creative and to do your own thing with it, what you want to do here is just pick and choose what you want to use. If you're not going to use something, delete it, remove it out of there and just put each CSS snippet you want to use, make those little adjustments to it. And that's it. That's a fully shrinking, sticky nav bar. That's a mouthful, isn't it? All right, so I hope you found this helpful. And if you could think of any other effects that you would like to see, drop them in the comments. I mean, that's where I got the idea to go ahead and remake the shrinking logo video that I made adding in all the different effects. And these videos, well, they're for all of you. So drop them in the comments. I might choose yours for one of my next videos and make sure all that good YouTube stuff, like, subscribe. It really does help the channel out and I appreciate it. And I'll be back again soon with more Elementor and web design related content. All right, thank you.