Change To A Different Header On Scroll Using Elementor

what's up guys i'm your real soto now in this video i'm going to be showing you how to change your header on scroll now i want to give a huge shout out to maxim for providing this for the elementor community i will have all of his socials down in the description especially his youtube channel he does have a lot of great tutorials that i definitely recommend you check out here's a part of element how so definitely check that out i will have this all down in the description now let's go ahead and see what we're going to be building here so as you can tell whenever we scroll down here we have this custom header here and it looks really nice and it has this really nice transition as you can tell goes from uh from the top to the bottom there just pops out which is really nice there that's what we're going to be creating there and i hope you guys enjoy so let's begin so let's go ahead and edit our header so i'm going to go into the header builder here and we just need to create the header that we want to appear whenever someone scrolls so since i already have a header up above here i'm just going to duplicate this one and i'm going to go ahead and just change um the background here just so that we have some sort of difference i'm going to change this to white and i'm going to go ahead and change this logo here of course this is just my preference right now but of course you can just use any header that you may have whichever header that you want to appear whenever someone scrolls and let me just fix this one here over here here we go and let's go ahead and just make this one and go in here make sure this hover is also set to black there we go we can just set it up like this for now hamburger menu let me make sure that this is also set to black and let's make sure that my drop down here my toggle button is set to black as well there we go okay so this is a header that we're gonna be using whenever someone scrolls now i do need to add now i can either do this um i can either do this from i can just add an html in here or i can use elementor code i'm just going to add an html element in here so i'm just going to type in html i'm going to drag this right in here now i can pretty much drag it anywhere probably just going to grab it right here and i'm just going to make it in line just when it all fits together here this is just my preference this isn't really necessary but it just adds right there and makes it really small so it's not noticeable and then let's go in here into the html code and let's go into um elementor codes this is where we're going to be grabbing um the the code here and i will have the person socials and everything down in the description um i believe his name is maximum hopefully i'm pronouncing that properly um but i'll have everything down in the description and i'll have it to youtube as well he does make some great youtube tutorials so i definitely recommend you check those out so what we need to do is i'm not really going to read too much through this i already uh went through it so first thing is i would need to go ahead and copy this us this id here so just copy this and then go into your your header section this is the one that we're going to be using i'm probably going to rename this one maybe header scroll i would just like to rename things here so we just know what we're looking at and we're going to go ahead go to advanced and paste this right in and then we're going to grab this code here i'm going to copy that and we just want to place that inside our html so paste that right in here and there we go and you'll notice that it will go away which is perfect um now of course i'm having this little bug here but don't worry this isn't going to really be showing up it's just because i have this one that's not displayed but what i'm gonna do is i know that he has some css right here i'm actually just gonna go ahead and remove this and add this within my um my header section just because i wouldn't want that loading in line then i'm gonna click on my section here and go into advance and just paste this right in here and we'll have the same result here and then we just click update now let's go and view our website here now let me go to the home page here let me log out and as you can tell whenever we scroll to a certain area you notice that the the header does pop out but um obviously i do have my wordpress menu here in the way so i could log out but before i log out and show you guys that let me go through some of the some of the code here i do want to go through that so i do want to adjust some things so over here we have it we have it so then it pops out whenever um it passes 300 as you can tell it says change this value here to make it show up at your desired scroll location so i wanted to show up a lot sooner so let's maybe do i'm gonna do about 75 that is my desired um scroll height there so now i'm going to go back here and you notice as soon as i pass this header right here it's probably just going to pop out right now you see that okay now let me go ahead and log out so now whenever we scroll here you can see that we have the menu here now this is this menu is mainly made for logged in users but it's fine i just wanted to give you guys that example as you can tell it doesn't really show my my picture here of myself but of course if i were to log in here i go to my dashboard you notice that i have that set because i'm logged in okay now that's pretty much it for this video um if you guys do have any questions on this just feel free to comment down below and i'll definitely try to help you guys out now if you guys haven't subscribed to the channel please consider subscribing so you don't miss out on any of my videos now as always thanks for watching and i'll catch you guys in the next video

Channel: Uriel Soto

Views: 24,599

Keywords: change header on scroll elementor, change logo on scroll, change menu on scroll elementor, change background color on scroll eleme, elementor header scrolling effects

Id: nLyoDwh3HAY

Length: 6min 38sec (398 seconds)

Published: Thu Nov 04 2021