 In this video, I'll show you how to change your logos while scrolling your webpage by using Elementor's sticky navigation feature or function. What's up everyone, I'm Jeffrey from Lightbox and this is Building Businesses with Elementor. This is where we talk about growing web design businesses and elevating your Elementor skills. Alright, 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'll take you right there. Let's start back in your dashboard. So from your dashboard, navigate over to templates that's underneath Elementor. From here, select on Theme Builder. Then go up here and click on Add New. From here, you want to select Header. Now if you already have the header built, go ahead and just go to that header and start to edit that header. But if you don't, let's go ahead and start one brand new from scratch. Let's go ahead and give it a name, we'll call it Changing Logo Menu, so we could easily identify it. And then select Create Template. From here now you're going to have a selection of pre-built headers, we're not going to use any of these, we're going to build our own because it's quite easy to do. From here, select on Add a New Section and we're going to make this very simple, we're going to make it just like this right here, we're going to have a logo on one side and we're going to have our menu on the other side. So select on the two columns and let's style up this column really quick, let's make it full width. I'm going to add a little bit of padding here, some on the top, some on the bottom. And we want to give good padding on the right and left, let's say 24 pixels on the right and 24 on the left. This way the menu and logo aren't squished to the very ends, we want a good padding right there. All right, so let's start by adding our navigation menu. So add this to this side right here and we'll style it up. And let's use this as a reference. Now one thing you notice here, the text is white and the background of this is transparent. The effect that I'm going for right here is we want something that looks nice over a nice banner. And I find a transparent background with a dark banner works well, but you could also add a dark background to this or you could do it any way that you like. But we're going to basically copy this right here and rebuild this. So we're going to keep it transparent in the background. Let's style up this menu real quick, no underline. And for the color, well, we need to make the color white. So that's going to be kind of hard to see. So let me temporarily add some color to the background here, just so we could kind of see it and we know what we're doing. All right, we're looking good there. Let me add the hover real quick. We'll get the brand color and active will also give it the brand color. There we go. And what's also make sure in the columns right here that you vertically align these to the middle. That way everything stays even your menu and your logo that will stay even to each other. All right, we got our menu set up here. Now let's add our logo or should I say logos because we're going to actually add two logos to this. We're going to add both your light logo and your dark logo. So to do this, I prefer to use the image widget. I find the image widget has just a little bit more flexibility than the site logo widget. So let me go ahead and drag the first image widget here. And I'll make this full size. Let's align this to the left and we are starting off with the light logo. So let's add the light logo here and here we have it. Let's style it up right here and I'll do it by pixels and we'll make this one to 40. Yeah, 240 is okay. We'll make it big. All right. And we're good to go right there. Now the next thing we want to do, let's go ahead and duplicate this because we want to have two logos. So duplicate it, but let's change out the second logo and put the dark one in. All right. Now there's one more step we need to do in order to make this look even here. Go back to your edit column and here for your widget spaces, put zero. All right. So we're good to go right there. Let's go ahead and turn this off. We'll just clear it out and make it transparent again. All right. Now here comes the fun part. It's time to add some CSS and no, don't worry, you don't need to know CSS in order to do this. I made it really easy where you're just going to have to copy and paste the CSS in there and there's lots of notes that make it really easy for you to understand what does what. And the CSS that we're adding, it could be put into your section for Elementor CSS. You could put it in your child theme or you could put it in your customizer. It'll work wherever you put it inside your website. So let's start off here. First, we want to go to the section and we want to make sure you're editing the section. This is where we want to put the CSS just for this video. And again, you choose where you want to add your CSS. Okay, so for here and let me pull it up. Here's what our CSS looks like. Now it's a bit more than our other videos because there are a few effects actually that we're going to be making with this in order to make this work. So first off, let me just copy and paste this all. Get this out of the way. We'll copy that. We'll go here to your custom CSS that's under advanced and paste it inside here. All right, the next step is we need to give some classes to your menu and to both logos. Now for the dark logo, we're going to give it a class. And let me show you from the CSS so you know what we're looking at. So we're going to give it a class D logo, which is short for dark logo. I like to make it easy to understand. So go to your dark image right here or your dark logo, navigate to advanced to your CSS classes, and paste it and you'll see it just disappeared. And that's okay, leave it right there where that's supposed to be. Let's go to our next bit, which is going to be for our light logo. And that is going to be you guessed it, L dash logo for light logo. Now let's navigate to your light logo or image, go to advance down to CSS classes and add it a logo. All right, now there's just one more class that we need to add. And that is going to be for our sticky menu items. And this is going to be for our menu. So go over to your nav menu. Navigate to advanced to your CSS classes, and paste this in sticky menu items. And these are your classes right here. All right, so we got everything set up your CSS setup, your classes are set up. Now the last step, we got to set up the sticky part of Elementor to make it all stick and to make it all work. So go back over here to your section, this is what we're going to make stick. Get here to advance, go down to motion effects. And from here on sticky, select on top. Here you got a few options that have opened up. You could choose which devices you want this to work on simply click off the devices you do not want your menu to stick on and to scroll regularly. Now the offset part, this just moves it up and down, we don't need it for making this effect. So leave it at zero. What we do need to do though is set our effects offset. So what the effects offset does is, let's go ahead and make this 100. So what this does is it makes it so how far you scroll the effect takes place. So we have 100 right here. That means when you scroll your page up 100 pixels, the effect takes place at 100 pixels. If you were to put a thousand pixels, then you would have to scroll up a lot more to get that effect. And if you're to put 10 pixels, well, you would barely move the page and the effect would take place right away. One really important thing to note, you cannot leave it at zero. If you leave it at zero, the effect does not take place and it will not work. So we have this set up. And look at that. What you already see is working because the CSS we put is in place. And now when you scroll up, you can see the logos change. So we can see it looking, but this might be a little bit more advanced. And it is a bit more advanced than the other effect videos that I made, but I want to show you why this works and how it works. So I'm going to pull up the CSS right now and walk you through it just to give a better understanding, because it's one thing adding a CSS snippet and seeing it work. But there's another thing by having an idea and a bit of an understanding of how it works. All right. So the first one right here, you can see a high the dark logo. When we put in the D logo, we have it at display none. So this hides it initially. And then later, this is when the effects take place whenever you see this class element or sticky effects. This is actually a class element or is made. But this class does not appear or take effect until the page scrolls. And it hits this effects offset. So when this effects offset hits whatever you set right here, that's when this new class takes effect. And that's when when we target something, let me pull up my script again. And we target something like, okay, let's make the D logo inline block. So we made it initially hide by display none. And then when it scrolled and it hit that 100 pixel mark that we set in the effects offset and want to display inline block. And then we did the same thing for the light logo that we just made the light logo disappear. Now here are the other things we added. We have the changes the menu background color on scroll. So we need to change it and make it light. And that's where we add a background, fff, which is white. And you could change this color right here. So this, you can edit and change whichever color you want. Here's the next part right here. We had to change the text color, because the text was originally white. But if you scroll it, you have a white background. You know, you're going to want dark text, just like you want the dark logo. And even though it's hard to see and that's because of my sublime text editor right here, but we set the color of, and that's why we have the class, a sticky menu items, because we wanted to set the color of the text dark when we scroll. So you could also change right here and edit this text. Just edit the code right here, the numbers right here to match what color that you want. And then the last part of what we added in here, and this just basically controls the transition and makes it smoother and cleaner. You don't need to change this at all. You could play around with it if you are comfortable using CSS. And what I mean play around is you could change the speed of how slowly or quickly did the effects take place. It's that fading type of effect by found point five seconds is a good amount. Everything is looking good. It's working now. We could see it is changing and look smooth. So let's go ahead and save it and put it across our site and see how it looks. From here, click on update. Make sure we save it. Let's add the condition, put it on entire site and save and close. And that's it. That's how you change your logos on scroll. Of course, we had to do a couple other things in this video like we had to change the background color on scroll, as well as the text color on scroll. So it was a little bit more complicated than some of our previous videos with elementary sticky scroll. But it all works together. And once you have it working together, you get a really nice menu that makes it easy for your website viewers to navigate your website, which makes for better UI and user interaction. I hope this helps. We look forward to putting out a lot more videos like these, as well as more designed focus videos for elementary users. So subscribe, like, comment, support the channel. We are a new channel and appreciate all the support. All right. Thank you.