 In this video, I'll show you how to change the background of your menu when scrolling with Elementor's sticky scroll effect. Here, we can make a menu have a transparent background and change to a solid background color when scrolling. What's up everyone, I'm Jeffery 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. 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 will take you right there. Let's start over at the dashboard. From your dashboard, navigate over to templates. Then from here to Theme Builder. If you already have your header built, go ahead and start to edit that header, but if you don't, let's create a new one. So for this tutorial, we'll create a new header from scratch. Go up here to Add New, then select on header and give your header a name. We'll call this one Changing Backgrounds menu, then select Create Template. Now from here, you got to set up pre-built templates. We're not going to use any of these for this tutorial. We'll build it from scratch because this is really easy to do. From here, let's add our row. This is going to be our nav bar. We'll make it two columns. One side will be for the logo and the other side will be for the navigation menu. Now, however you make your menu structure, this will work the same. We're just going to keep it simple for this video. I'm going to use an image for my logo. I prefer images using the image widget because I feel I got more flexibility with it. Then I'm going to add my navigation menu widget onto this side. Give me a couple seconds. Let me style this up and we'll come right back. Okay, now we're back. We got everything styled up. From here, we're going to go ahead and add the effects. Now, just about everything is going to be done in this section. So let's set up our section. Navigate up here to the top and make sure you click on the Edit section. And just double check that this is the part that you're in. Just to make sure in the right area. So the first step is we want to set up our sticky effect and make the menu stick to the top. As you see right now, it's not sticking. For here, for your Edit section, go to Advanced. Go down to Motion Effects and under Sticky, select on top. And right away, you're going to see it is now sticking to the top. You will also notice here a few extra options came up. You have this option right here, which will allow you to choose which device you want to show this on. And if you don't want to show it on a mobile tablet, just simply click it off. This option here, Offset, we don't want to touch. We want to leave it on zero for this effect. This is not needed right here. But what we do want to work on is our effects offset. This is important. What this does is we select how far the page scrolls before the effect takes place. So let's say let's add this 100 right here. Now that's going to be 100 pixels that the page scrolls before the effect happens. So if we're to put, say, 1000 pixels, you'd have to scroll way further down in order for the effect to take place. Or if you put like 10 pixels, you'd barely scroll or move the mouse and then the effect will take place. Leave it at 100. It's a good sweet spot for me. And now the next step is we want to add just a little bit of CSS. And don't worry. If you don't know CSS, that's not a problem at all. Are you going to do is copy and paste a few lines? I'm going to make it really easy for you and show you exactly how to do this. So no CSS knowledge needed at all. Here's the CSS we're going to copy and paste. Let's go ahead and copy that. And still in your edit section section, let's go here to your custom CSS. Now you could actually add this anywhere in your site in your child theme, your customizer, wherever you want to keep your CSS. But for this video and to keep it simple, we're going to add it here. Copy and paste. And you'll see already right away the effect is taking place. Now we have a set to this color right here, but you're going to want to change this and make it your own color that's going to match your website's brand and design. And that's going to be very easy right here on the top where it says background. There's even a note in it that says change the background color here. So that way you know this is where you change it. All you do is change this color code right here. So that's all you do and you'll change it and put whatever color you want in there. Now there's something else that I added in here. I gave a little bit of a bonus and that is you might also want to change the text color as well. So as a little bonus, I added this little code snippet in there. And we're going to add a class into your menu widget. So go over here to your menu, navigate over to advance and over to your CSS classes and copy and paste that in there. Now you can change the color. So let's go back to your sections and inside this middle code snippet right here. There's also a note in here to make it easy to identify. This is to change the menu text color here. I have it set out white. Let's say let's do something like red. Probably not going to use red text. It's not a good idea, but just to make it easy. You'll see the effect also takes place. So you could get creative here. You could change the background color. You could also change the color of your text. Now let me change this back to white because there's one more thing we want to do. So really where this comes in handy and changing the background color is if you want to use it transparent. Let's say you have a banner and you have your menu on top of the background of the menu is transparent. It looks nice. It looks clean, but then when you scroll the page, the background comes up. So that way it's easy to see the menu. Let's go ahead and set that up. So in here in your edit section, go to style. Now in your color, let's just drag the opacity all the way down the transparent. So now the background is transparent. And when you scroll up, you can see the background changes color. And let's take a look at now how this will look if you have a banner here. And here's our page right here. So this is how it will look. We got a banner, we got a transparent on the top. We scroll, then we get that background color that comes up. So that way, when we get to these light sections, you can now see the menu. And that's it. It's actually quite simple adding effects to your navigation menu with Elementor. And with Elementor's sticky feature, we can add several different functions to your nav menu. This allows you to get creative and to improve usability in the menus for the websites that you design. We have other effects coming up like shrinking logos or logos changing from light to dark on scroll and also shrinking nav bars. So we're going to put out a video for each one of them, making it a lot easier to follow along. So make sure to subscribe. That way you get notified for the next videos that are coming out. That's it for this evening. Thank you.