 In this Elementor tutorial, you'll learn an easy way how to change your logo size on scroll, creating a logo shrink effect, and without using any third party plugins. What's up everyone, I'm Jeffy from Lightbox and this is Building Businesses with Elementor. This is where we focus on growing your web design business and elevating your Elementor skills. Let's dive in. First, what you're going to need for this tutorial. You will not need any third party plugins or add-ons, but you will need Elementor Pro. So if you don't have the Pro version yet, pause the video, go grab a license, then come right back. There is a link in the top comment that will take you right there. Alright, so first up we need to create our header with our navigation bar. To do this, go over to Elementor, underneath templates, then select Theme Builder. From here, click on Add New, and select Header. Go ahead and give your header a name. For this video, we'll call our sticky header, Create Template, and you're going to have all these pre-built templates made. We're not going to use them, we're going to build our own right here. So select on your row, and we'll make just two columns. That side will be for the logo, and the other side over here will be for our navigation. Let's go ahead and add them in and style them up. For your logo, you can add either Site Logo or Image. I prefer to use Image because I feel like I have more flexibility with it. And let's go ahead and add your navigation, your nav menu, and let's style this up. Once you have this styled up, now we're ready to make a stick. But first, let's take a look at our logo right here. There's a few things we need to do. In the logo, make sure you're using pixels only. Also, we're going to need to give it a class. So navigate here to Advanced, and let me pull our class over here. We're going to give this a class called Sticky Logo, and add that right here underneath CSS classes. And yes, there is some CSS, just a little bit, don't panic. If you don't know CSS, there is going to be a simple little thing you copy and paste so you don't need to know CSS for this, but we do got to use it. So next step, we're going to set up the sticky nav bar. And this is where the magic happens. Now, this up here, this is the nav bar. That's what this is called, or navigation bar. What we're going to want to do is go to Edit Section, select right here, and you should see Edit Section here. Go over to Advanced, down to Motion Effects, over to Sticky, and select Top. Now you will see that your nav bar is sticking to the top. A few options have opened up here, and you can select what device you wanted to stick on. You also have the Offset and Effects Offset. And let me explain these real quick. So Offset, this just moves it down or moves it up. You don't need to worry about that. Just leave that one on zero. The one we do need to set is the Effects Offset. And what this does is it allows us to select where in the scrolling does the effect take place. So if we want to add 100 here, when you scroll 100 pixels, that's when the effect will take place. So that's when your logo would shrink. You could add in 2000 pixels, and it would shrink when you scroll way down to the bottom, or 20, which will shrink as soon as you move it. 100 is a good spot. Let's leave it there. And now we're going to need to test this out. Let's create some space here real quick. Let's add a quick section just so this is temporary. You can delete it after. But this way you can test it and actually see the effects happen. All right, so now our sticky nav bar is there. It's working. But now we need to add the effect. And this is where we're going to add the CSS. Now, all you're going to have to do is copy and paste it. I'm going to go through this very carefully. So that way it is really easy, even for those who don't know CSS, to make this happen and make it work. So go back to Edit section. Let's pull out the CSS. Here is my CSS code that we're going to copy and paste in there. Go down right here to Custom CSS. Now, you could actually add this CSS in different places on the website. So if you are a developer who's more used to CSS, this code that I put together, you could either put it here. You could put in your customizer or put it in your child thing. For this video, we'll keep it simple and put it in here. And you can see it's working right there. But let me break down and show you why and what you need to do if you want to say maybe not make a shrink that much or make a shrink even more. So here is a code we have right here. We have only three different elements that we're triggering. So the first one right here is we're going to shrink it down to 120 pixels. And that's why it is important to select pixels on the image. And you'll see that we selected 220. So we are actually shrinking it by 100 pixels. Now, this is the part that you could change to your liking. This next one right here is going to be the transition. This is basically saying how long it takes for the transition to happen. And let me show you really quick. So right here, it says 0.5s. That's 0.5 seconds, a half a second. And you can see there's a little bit of a smoothness to it. Now, let's say we don't want any of that and just put 0 seconds. You'll see it's really sharp. There's no transition at all. Or if you want to put like 3 seconds, it'll be super slow. It'll take 3 seconds. So you also can change that to your liking. I find 5.5 a second is good. And then this last part right here, this is for your mobile because most of the time, you're going to already make your logo smaller for mobile devices. So like right here, we have it at 220 pixels. So on our mobile, we might only want it at about 120 pixels about this size right here, but still maybe want to have that effect. So if you still want that effect, we added this here. And you just change whatever you want for the mobile size to meet what you think looks nice for your logo. And that's it. That's all you have to do this code. Nothing's going to change on it. No updates to Elementor are going to affect it. So if you are watching this, 2020, if you're watching this in 2022, 2023, this should work. If not, hit me up and I'll make sure to change it. Now this same method that we use to create a shrinking logo when scrolling, we can make other effects as well. We could do things like changing the color of the background. We can make the background transparent. We could shrink the size of the nav bar. We could even change out the logos, say start with a light logo and scroll and then a dark logo comes up. And we could do it all with the same exact method. Now I'm going to be making a video for each one of these effects. I'm just going to do one at a time to keep it easy and simple to take in. So subscribe, that way you can get notified and it'll be easy for you to find these other videos. And support our channel by hitting the like. It's a new channel. Could use all the support right now and feedback as well. All right, thank you.