How to make Elmentor Sticky Menus that change on scroll

What’s up everyone,  in this video i’m going to show you how to switch headers and menus when scrolling your web page using Elementor sticky function. Now i’m going to show you two different options in this video one is going to be a revealing type of effect where the header slides up and down when scrolling.

The other one is going to be a fade in style we’re going to do this step by step and we’re going to make it really easy – so that way even if you’re a beginner brand new to Elementor or even WordPress you’ll be able to add this effect to your website. By the end of this video. With Elementor sticky headers there’s all kinds of effects we could add like shrinking logos, switching logos backgrounds that change…. well there’s a lot of them and I made a few of those videos already, so be sure to check them out. I also got one coming up where we’re gonna put a bunch of different styles together and get really creative so make sure to subscribe. 

So for this video we’re not going to need any third party plugins all we’re going to need is Elementor and Elementor Pro
if you don’t have the pro version I really recommend getting it it unlocks so much more of what you could do with Elementor there is a link in the description it’s an affiliate link and it does help support this channel and allows me to make more videos like this alright so let’s go ahead and get started on this now go to your web page and make sure you open up three tabs. You see I got three of them over here one of them we’re going to use this for testing that way we could scroll it up and down the second one on this page we’re going to use this to add our css select on customize and then here select on additional css go ahead and close this and don’t worry if you do not know css or code you don’t need to know that for this video there are going to be just a couple little tiny snippets of css that we’re going to copy and paste and put it in here the css is in the description so that way you can copy and paste it put it in i’ll show you where what to do with it where to put it and make it super easy for everyone all right so on our second tab over here let’s go to our back end select on dashboard then go over here to our templates underneath elementor and select on theme builder from here you’re going to select on add new and we’re going to add a new header let’s go ahead and give this a name you can call yours whatever you want
i’m going to call this switching headers create the template all right we’re not going to use any templates right here so we’re going to make our own and you saw my description i i’m going to keep it really simple we’re going to add a logo a menu and a call to action contact [Music] button [Music] all right now i got my first menu built right here i just sped it along i want to make this video really quick and easy to do so first one i did this is going to be for your light menu this is going to be for
the menu that is we’re going to start off with the one that’s going to go on top of your banner image right here so now that your light menu is built let’s add a z index to it go to edit section you need to have a z index here i’m going to put 100 the reason for this is this needs to go on top of your banner if you don’t have a z index here it’s going to hide underneath it and you won’t be able to see it all right so now our first menu is built this is our menu number one or header number one go over here to edit section make sure you’re on edit section right here right click on it and then select on duplicate now we’re going to build our second header and we’re going to switch this out i’m going to just make this a darker version with the white background here okay now we got two menus built we got our header number one we got our header number two next up
let’s give them both classes so we’ll start with header number one select on edit section go over here to advanced and underneath css classes we’re going to give this a class called header dash one this is super important because this is what’s going to be used in the css that you’re going to copy and paste in here let’s go to our header number two to advance and you guessed it the header class is going to be called header number two header dash two [Music] all right let’s go ahead and select on update on this give it a condition we’re going to add it to the entire site save and close and let’s refresh this to see what we’re looking at right now okay here we go we got both of them but i see i didn’t give this one a white background let’s go back here to my second to my header number two go to edit section let’s give it a white background uh one thing we want to do too is let’s give this a box shadow as well because when we scroll we want this to have a little bit of depth in it so we’re going to give it a box shadow underneath edit section go to border then go to box shadow and we’re going to give this a 10 this one will be 30. spread will do a little bit of underspread minus five and then on the color i like mine to be like a dark gray but we’re gonna bring this all the way down to point one because we want it to be very subtle let’s update it take a look at it now and there we go now we got two menus right here now we’re gonna have to switch the orders of these and the reason why we’re switching the order is when i was making this tutorial and i was running tests i found out on safari
that there was a little bit of a complication on compatibility so in order to make this compatible with safari firefox and chrome we’re going to switch to order so let’s move this one on the top so header 2 is actually going to go on the top and this one is on the bottom let’s go ahead and update it next up let’s add our css now let’s go to the customize where we have some css and let me pull up our css script we’ll start off with the sliding in from the top effect right here we’ll copy and paste that and that’s all you got to do is paste this right inside there it’s good to go hit publish now let’s refresh it okay we see one of them disappear but nothing’s happening yet the reason for that is we need to set up our sticky effects for our first header we’re not going to touch it on the light one that one is good to go we do not need to do anything as far as sticky effects we’re only going to apply this to our dark header the one that’s going to stick up at the top go to edit section back over to advanced navigate to motion effects and underneath sticky select on top you have the option to use desktop tablet and mobile we’re only going to do desktop and tablet for this video offset this just moves it up and down we’re not going to touch it that’s not needed where the magic happens is right here on the effects offset that’s where we determine how far along the scroll the effect takes place now you have to have something here if you leave it at zero it will not work let’s put in 100 and i’ll explain what the 100 means now when you put in say 100 right here when we scroll let’s refresh this when we scroll 100 pixels the effect takes place now if we were to say let’s say 1000 pixels we want to scroll longer until the effect takes place let’s refresh it and you’ll see we got a scroll down about a thousand pixels and then we get the effects so you get to play with that wherever you want to set it wherever you feel comfortable and you want this to slide out you can set it there now but we have this big space right here so we got to address this and we’re going to have to use negative margins here so go back over here and go to this header right here select on edit section go to advanced to your margins and make sure they aren’t linked and you’re going to use a top and we’re going to use the minus on it we’re going to go underneath it and go all the way till it hits the top it looks like 75 it hits the top and let’s refresh it let’s see what happens here and there we go now it’s working at the top and it is that simple that’s how it works right there now if we want to apply the other effect the fade in effect all we got to do is add the fade in option css right here let’s copy and paste this now you can only use one or the other so we’re going to have to remove this right here if you try to put both of them they will conflict with each other so choose only one or the other we’ll go ahead and put the fade in effect save that let’s refresh this scroll up and there we go now with fades in and it fades out and that’s it by using elementor sticky function we could add all kinds of special effects and tricks to our elementor headers just got to be a little creative in fact i got another video that i’m working on right now we’re going to add several different effects together try to make something like really creative so make sure to subscribe like you know all that good youtube stuff but also to make sure you get notified when i put out some new videos and some new content and you know tips tricks and hacks for elementor also if there’s anything that you’re curious about or you would like to see uh done let me know drop it inside the comments i go through all the comments i respond to all of them in fact i got the idea for this video because a few people mentioned it inside the comments so i really appreciate it thank you for watching i’ll be back with more elementor and web design related
content all right thank you