in this video I'll show you how to change the background of your menu when scrolling were Elementor 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 Jeffrey from lightbox and this is building businesses with elements work this is what we focus on growing your web design business and elevating your Elementor skills all right let's dive in first what you want to need for this tutorial you will not need any third party plugins or add-ons but you will need elements or 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 over at the dashboard from your dashboard navigate over to templates then from here to theme builder if you already have your header bill 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 you a header a name we'll call this one changing backgrounds menu then select create template now from here you got a set of pre-built templates we're not going to use any of these for this tutorial well build it from scratch because this is really easy to do from here let's add our roof this is going to be our navbar 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 gonna use an image from our logo I prefer images using the image widget cuz I feel I got more flexibility with it I'm going to add my navigation menu widget onto this side and 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 the 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 a 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 gonna 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 mobile tablet just simply click it off this set 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 gonna be 100 pixels that the page Scrolls before the effect happens so if we were to put say a thousand 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 believe 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 gonna do is copy and paste a few lines I'm gonna 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 just go ahead and copy that and still in your set in your edit section section let's go here to your custom CSS now you can actually add this anywhere in your site in your child theme your customizer or 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 taken place now we have a set to this color right here but you're gonna want to change this and make it your own color that's gonna match your website's brand and design and that's gonna 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 could 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 advanced 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 haven't set up white let's say let's do something like rent probably not gonna 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 can get creative here you can change the background color you can 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 a transparent let's say you have a banner and you have your menu on top at the background of the menus 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 to transparent so now the background is transparent and when you scroll up you can see the background change this color and let's take a look at 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 elements or and with elements or sticky feature we can add several different functions to your nav menu this allows you to get creative and to improve usability and 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 gonna put out a video for each one about making it a lot easier to follow along so make sure to subscribe that way you can notify for the next videos that are coming out that's it for this evening thank you .
Our goal here is growing your web design business and elevating your Elementor Skills
Some of our main focuses:
✅ 1. Scaling your web design business
✅ 2. Adding more value to your clients
✅ 3. Earning more $$$ for your projects
✅ 5. And improving your Elementor and Web Design Skillz!!!
🔥Join or Facebook group and be part of a supportive community of like-minded creatives helping each other in growing our business – …
Every week, the Building Businesses with Elementor group host live calls discussing topics on business development. This week we discussed how to run effective first initial consultations & discoveries with new clients.
✅ To join our group calls, visit our Facebook group page 'Building Businesses with Elementor' here –
✅ For free resources and PDF download of this videos slide deck visit here –
✅ To talk and schedule a call, you can reach me here –