A Fully Shrinking Sticky Header On Scroll With Elementor

in this video i'm going to show you how to make a fully shrinking header and nav bar just like this and when i say fully shrinking i'm talking about everything is going to shrink we're going to have the section shrinking your logo is going to shrink the menu and even the call to action button is going to shrink we're going to make this really easy so that way anybody following along can make this on your own websites and we are also going to do this for mobile as well so both desktop and mobile what's up everyone i'm jeffrey at lightbox and i want to give a special shout out to aileen and leandro and many others as well who left comments in one of my last shrinking menu videos for the ideas to add more shrinking effects and to make this for mobile as well so if you have any ideas drop them in the comments as well i might just choose yours for my next video okay let's go ahead and get started and have some fun for this tutorial we're going to be building a header for this landing page now just a heads up i do have a new series coming up called designing with elementor where i'm going to be showing how to design landing pages like this so if you're interested in developing and learning more design skills with elements or you know make sure to subscribe and all that good youtube stuff all right so let's start off by creating a header to do that navigate over to your dashboard and then go over to your templates to your theme builder now if you already have a head header built uh there are time stamps in the description so you could jump ahead all right from here go ahead and click on add new and then let's add a new header now it's going to take you right into the editor the first thing i always do is we're not first off we're not going to use any of the templates we're going to build our own because it's pretty easy to do but the first thing i like to do always is going down to my settings and giving my template a name because you know it just has this generic name elementor header with a number and then it can get really easy to start to confuse things so i want to keep everything clean and by doing that let's give it a title we're going to call this sticky shrinking header and i already got it right there all right cool so the next step is let's add a section and put all of our elements in it uh now i did build this out with containers and i was going to do the video using the new elementor containers but it's still in the alpha beta stage and at the time of making this video there are some pretty big bugs in it which made it not really usable but i did test this out in containers as well as how we're going to do with sections and it works in both all right let's add our elements inside here so we're going to add a logo i'm going to use an image widget for my logo i prefer using the image widget it just i just feel like it has more flexibility to it and i prefer it all right so let me add our logo image here and i got one it's down here at the bottom let's insert that uh let's give it a link let's make sure we link it and have a link that goes to home to do that just put in custom url and put a forward slash that's all we need and let's go ahead and just give it a size i'm going to give it 150 pixels all right next up we're going to put our menu so i'm going to add the nav menu here now i created a couple menus i got one just for this landing page right here we're going to call i'm going to use the sticky menu and next let's put a button that's going to be our call to action button so i'm going to drag and drop that here underneath our menu and this one we're going to call download app all right you can put your call to action contact me or whatever uh you want that to be you could even put two call to actions there's a lot of flexibility to this we're just going to start with this basic type menu right here next let's go ahead and use flex and make everything line up now we're going to do everything in one column and we should always try to use either just one column or one container uh the less that we use is always the better because it's going to make the code in the back end behind everything a whole lot cleaner which is going to make your website faster so to do this let's go over to each element i'm first going to go to my image i'm going to go over to advanced to with and i'm going to put it in line which is now going to make it just the size of the widget you know by default they're all 100 percent and i'm going to do the same to our menu with inline and then the same to our button with and in line so now everything's in one line and we're going to use flexbox and we're going to make everything spread out and look even so to do that we're going to go over here to our column and if you're using containers it's very similar you just have more options in the containers so click on edit column first thing is we want to go to vertical align and we want to align it to the middle and that's going to make sure everything is even inside the middle here next up is horizontal align and we want to make it space between that is going to make it so the very first element is all the way to the left and the last element is all the way to the right now i encourage everybody to play around with these so really get familiar with these flex options here and when containers is stable and is out that is going to be the future of how we're going to be building everything to get really familiar with how to use flex within containers uh but this is a good start the containers just gives you a lot more options which has a lot more power all right cool so next up what we want to do is we want to style everything up now i'm not going to style everything here because that's going to take some time but i do have the designing with or videos coming out that are going to be more showing in depth on how to style and design things and taking you through my design process what i'm going to do is i'm going to go to the menu i already have built and i'm just going to copy and paste the styles in so i'm gonna start with my image i'm gonna paste out i'm gonna go over here to my menu i'm gonna copy it i'm gonna go to this one and paste the style and then i'm going to do the same thing to the call to action button copy it and paste the style and same thing for my section copy it and paste the style all right cool so our menu is built this is our desktop menu right here if you go and see the one i already have built you see another one here i'll show you that in a minute so let's start with the top and work our way down we're going to be shrinking four different elements we're going to be shrinking our section we're going to be shrinking our logo we're going to be shrinking our menu and then our call to action button so to start off with let's go to our section now on my section you can see i have spacing on the top and bottom right here if i go over to advanced you'll see i have padding 12 pixels all around so make sure to use padding on your section for your header right here and what we really want to focus on is the top and the bottom there's a couple other things i did i gave it a z index of a hundred make sure you give a z index here that's going to make sure your menu is on top of your web page and then you got to give a css class of shrinker we are going to need to copy and paste a little bit of css but don't worry i'm going to walk you through all that it's going to be super easy even if you don't understand css next up we're going to go over to the logo let's edit your logo or edit your image and we just need to add this css class right here the shrinking logo and i'll explain more on why we have to add a class here but then on your menu and on your button you don't have to do anything at all you're good to go with them next step is we want to make our header sticky now to do that go over to the section that you have everything wrapped up in select on edit section go over to advanced down to motion effects and from here you want to go over to sticky and select on top now you got desktop tablet and mobile choose what you want to use this for we're going to do this tutorial for all three we also are going to build a sticky menu for our mobile version the one thing we do need to change first off leave the offset at zero don't touch that what we need to change is the effects offset because this is where the magic happens right here so for example we're going to put 60 what this means is when the page scrolls 60 pixels that's when our effects are going to kick in that's when the shrinking is going to kick in and you could change this you could make it a hundred you can make it 200 if you like i find a sweet spot is anywhere between 60 to 120 but play around with it find what works for your design all right so we're going to leave this one at 60 i'm going to update this and now let's take a look at the front end now we have our sticky menu here but nothing happens when we scroll on it oh by the way i forgot to tell you we got another sp i got i got a little surprise in here as well i combined an extra effect i'm going to show you too probably should have mentioned that in the very beginning uh we're going to change the background color on scroll as well so this is this is going to have quite a few things in here that's why it's taking a little bit longer but it's all good all right now to get started we got some css we're gonna have to copy and paste in here now i'm gonna pull in my css here and here is our css now there's quite a bit but don't be overwhelmed by it because you're probably going to not need all of it i've broken each of them down into sections so we have this bit right here that we copy and paste in and this is going to shrink the section and it's going to shrink the overall section wrapper we have this little tidbit right here and this is going to shrink your logo image and we're going to go through each of them as we apply it to the site we have this small section here this is to change your nav menu to make that shrink and get smaller and then we got one for the call to action button as well and then here inside the overall section i also threw in how to change the background color of your menu as well so let's start off with this one we're going to go from top to bottom go through each one of them because i want to show you how to edit them as well so you could adjust it for your own site so from here we're going to use the customize now i i'm very you know vocal about this i really believe css should be kept all in one spot should be made organized and that's why i use either the customize section you can use a plug-in if you want or if you want to put it in elementor if that you go up here to your site settings right here and in your site settings then you would go down here to your custom css and put it in here we're going to use this for this tutorial i'm going to start off with the section now right now you can already see there's a shrinking effect right here and you can also see it's turning white there's one thing i want to do hold up i forgot to do something i forgot to move my web page up so let me edit this real quick edit the page with elementor because i wanted the menu to be transparent so i'm going to select on edit section here let me go to advanced and i'm going to move the margin up underneath our menu so that way we have the transparent menu there we go let me update that there we go all right i could close this down so now we have a shrinking menu let me open up the customize back to our css all right so we have two things happening here we have a little bit of shrinkage happening and then we have the color changing to white now in order to do this if you want to have a transparent background like this right here say you want your menu on top of whatever graphics on your banner right here in this first section and remember using shrinker that's the class we gave to our section you're going to put in the background transparent just like this you can leave it but if you aren't using a transparent background let's say your background is just white you would go ahead and change right inside here to the color code which for white which is fff or whatever color code your background is all right so the next thing we're going to have here this is wherever you see elementor sticky effects this is the class that appears after you scroll down a certain length of the page where you set for your effects offset so this is where we change everything so first off we're going to change the background color so this these two right here this one and this one you could adjust to as you want if you want the background color to change to red when you scroll let's just go ahead and put in red now it's going to change to red you could change the color to whatever you like just by editing right inside here i'm going to go back to white for this video just to keep it clean but play around with this so there's a whole lot of flexibility now here is where we're going to make a shrink that's going to be the padding top and the padding on bottom if we go back over to our section let me click on it you see we have 12 pixels on top 12 pixels on bottom so we want to shrink these on scroll to shrink them you're going to go right here and put whatever pixels you want it to shrink to so maybe i wanted to grow look at this if i put like 22 and 22 which is bigger than 12 you see it's actually going to grow so you could adjust these around right here i would adjust these and then your backgrounds as well to get it to what you feel like it's going to fit in and if you're not comfortable with css it's all good all you got to do is just make sure you don't like break this like you got to make sure you have this colon and the semicolon right over here now i added a few other things i added the box shadow right here that way it just gives a bit of depth it's totally optional i would personally use this on our websites because i think it's important to have that little bit of depth uh that separates the menu from the web page and then the transitions right here this is what makes it have that smooth look and feel so the reason why we have that so it isn't a sharp change it kind of just animates into it next up let's do our logo so i'm going to copy and paste this and everything is inside the description you can find all the css there's a link to take you to all the css in there that is also broken up made easier to use i'm gonna copy and paste that all right so for the logo i needed a workaround that's why we had to add an extra class and only the logo because it's an image i found the transitions weren't really working we need to set the width right here so if we go back over to our logo let me click on here and we go to our style you can see we set a width on it we need to replicate this width so say if your logo is 200 pixels if you want to be 200 pixels then here you need to make sure you put 200 pixels so that way it's the same size on both of them it's the only way i found to fix it so that way it has a smooth transition all right we're going to put this back on 150 because it looks good at that size you don't have to change anything here in the transitions you can leave them as it is but right here this is where we're going to change our size for our logo so i made this 120 now if i go up you can see it shrinks now if i want to take it to like 20 pixels it's going to go super small so all you got to do is adjust this number right here pixels this width and then make sure you set your initial width for your logo let's go ahead and shrink our menu i'm just going to copy and paste this little snippet now the menu and buttons they're a whole lot easier let me go ahead and paste that there uh because they really don't need much to it now if you scroll it you're gonna see it goes a little bit smaller the font sizes change just a little bit if we go back over to our menu right here let's click on our menu go over to style and to our typography you're gonna see we're at one rem now i use ram uh i used to use pixels but i don't use it anymore because ram is best for accessibility it's better that if somebody you know they need to see things bigger they zoom on the web page well the text will go with that zoom so i use the ram and we got one rim here we have the font size at point nine rem so i'm just going to shrink it just a little bit we don't want to shrink the menu too much where it's unreadable but just enough so that way it has a good enough of effect to it because right here you can go let's say we got .9 we could go down to 0.5 you can see it gets even a whole lot smaller so feel free to adjust that to what looks right for you all right next up let's do our button copy and paste and it's just like the menu it's a whole lot less we don't need much to it now if we scroll we can see the button getting smaller alright so we could do this if we go over to our button let's go to edit and go over to style and it's going to be the padding this is what we're focusing on to shrink our button so initially right here i got 16 on top 16 on bottom 48 on left and right so right here all i did was reduce the padding on top and bottom the first number this is the top so i got 10 pixels on top and bottom where here it's 16 and then over here i got 32 pixels on right and left where it was 48 so it has a smooth transition right here has a smooth uh uh shrinkage to it so one thing that's important here don't make a shrink too much but try to like find that sweet spot you know none of these let you shrink you never want it to just shrink too much you want to make it look uh subtle you know the more subtle the better it is that's going to be on the user experience so that is it for desktop we have a fully shrinking nav bar here for desktop and you can pick and choose you might not want to shrink everything maybe you just want to shrink the section uh so that's why i broke everything down just take what you need let me show you how i build a mobile menu and how you could put this effect on your mobile so i'm gonna go back over here to my menu what i'm gonna do here is i'm gonna go to my section and i'm gonna duplicate it alright my section right over here first thing i'm gonna do for my desktop one i'm gonna leave it on top i'm gonna go to advanced over down to responsive and i'm gonna make sure the hide on tablet is on and hide on mobile is on i wanna hide those then i'm gonna go to my menu for my mobile i'm gonna go to the section for the mobile i'm gonna go to advanced to responsive and i wanna be able to show on tablet mobile but i'm gonna hide it on desktop so now if i were to go here go to responsive mode and switch it over to tablet and then the same thing on mobile you can see that the top is hiding and the bottom is showing so we first need to fix this up so let's go ahead and remove our call to action button i'm going to delete that now i want to go kind of quick so instead of styling this one up i'm just going to copy and paste it from the one i have built so here's the one i already have built i'm going to copy this i'm going to paste the style here all right and all i did was change the styles again i'm going to show more of how to design and style things up in my designing with elementor videos and now if we click on here you see we got a drop down menu now if you want to build a more creative menu like a slide out menu using pop-ups i did create a video on that i'll leave a link to it inside the description we're good here on tablet now let's check out mobile and you can see we're good here on mobile as well and next we need to add a little bit of css right here for our mobile and tablet views so i have a snippet right here for tablet and mobile let's go ahead and copy and paste this all right so we got that in there and let's test it out right here i'm gonna let's go ahead and turn this into the mobile version all right here we go we got a mobile view right here and as we scroll up we can see a shrinking effect right here now on the phone i always suggest testing it out on the phone as we're adjusting it every time i'm doing mobile design i kind of get a good eye for it right here putting in a mobile view but it always looks a little bit different when you actually are working with it on the phone so we got that working here let me walk you through what it is what we have right here for our tablet and our mobile version is i gave the options in here to make changes just as we did in the css above for each one of our sections for when the window gets smaller for when we have a smaller screen so if we go down here you see i have it broken down for the background we have one broken down for the image one for the menu and then one for the button maybe you want to choose a keep a button right here i don't have a button so in a case like this i would completely remove it so i would probably just delete the button right here but if i did want to have a button on there i can make the button even smaller maybe i want it to be like 8 pixels by 20 pixels so you have more control on making each one of these elements even smaller for when it's on a smaller screen size now the one you probably will use the most when it comes to mobile for the shrinking is going to be the image and that is right here your shrinking image this is the one you're probably going to use the only one that i find really effective and that's because you could actually make your logo a little bit smaller when it's on mobile you don't need it as big as you need it on the desktop so like for example on this one i have it at 100 pixels when we scroll down which makes it a whole lot smaller the rest of these the shrinking menu and the background right here you can use if you like i leave it there so that way you could play around with it maybe you want to make the padding even smaller maybe you even want to change the background color just for your mobile so there is an option on here i'm gonna let you get creative and to do your own thing with it what you want to do here is just pick and choose what you want to use if you're not going to use something delete it remove it out of there and just put each css snippet you want to use make those little adjustments to it and that's it that's a fully shrinking sticky nap bar that's a mouthful isn't it all right so i hope you found this helpful and if you could think of any other effects that you would like to see drop them in the comments i mean that's where i got the idea to go ahead and remake the shrinking logo video that i made adding in all the different effects and these videos well for all of you so drop them in the comments i might choose yours for one of my next videos and you know make sure all that good youtube stuff like subscribe it really does help the channel out and i appreciate it and i'll be back again soon with more elementor and web design related content all right thank you [Music] you

Channel: Jeffrey @ Lytbox

Views: 24,540

Keywords: elementor sticky header, elementor sticky header on scroll, elementor sticky menu, elementor sticky header change color on scroll, elementor shrinking, wordpress sticky header elementor, elementor shrinking logo on scroll, wordpress shrinking header on scroll, elementor header sticky, elementor shrinking menu on scroll, change header background color wordpress, elementor change header, elementor change background color on scroll, elementor pro tutorial 2022, elementor pro

Id: ahpiYoGvnrc

Length: 25min 37sec (1537 seconds)

Published: Thu May 12 2022