How To Shrink Logo Header On Scroll Using Elementor

what's up guys i'm your real soto and in this video i'm going to be showing you how to shrink your logo when you scroll down your website and it's going to be looking just like this as you can tell whenever i scroll down it shrinks and it's actually a pretty cool feature in my opinion and it works very well on tablet and mobile so let me go ahead and show you guys how this looks on tablet on tablet it it shrinks as well i don't want it to shrink that much but it does shrink but you'll notice on mobile and you can kind of set that up how you want to shrink it um on mobile it actually shrinks really really well so i mean you guys can shrink it to pretty much whatever size you guys want so if you guys want to learn how to do that go ahead and stick around so let's begin now the first thing that we need to do is download a plugin so head over to your dashboard go into plugins go ahead and click on add new and just type in sticky header elementor and go ahead and install this plugin here and then activate it now go into your header now i am using elementor pro but you but you can also do this if you're using um elementor header header footer builder that's a plugin that you can also grab and then there's also elements kit i think allows you to create your own header but for the purpose of this video i am using the pro version but um it should be the same thing whether you're using the free those other plugins that allow you to create headers so from here go ahead and click on your header section and basically the section that you want to have the sticky header and where you want your logo to shrink so go to advance and then go to sticky header and make sure this is already enabled now if you're already using some sort of sticky header um i would suggest disabling that and then just using this sticky header instead so from here i'm going to go ahead and save this and we can go ahead and view this and we can go ahead and see that now we have a sticky header but our logo isn't shrinking and that's kind of the main point of this video so what we need to do is going back go back to your header and make sure you click on your header section here and then make sure you're on sticky header effects and under here you'll see a portion where it says logo go ahead and enable that and then now if we were to update this you would probably notice it still wouldn't shrink and you might have that issue now the reason being is that you need to make sure that the pixels on this size here is smaller than then what is already on your logo so let's say my logo right now is about 222 well it's not really going to shrink if it's already set to that to 222 or if it's set to already 200 it's not going to shrink because it's it's either the exact same size or it's or it's actually um or it's actually uh are already um smaller than this size right here because if it's not if it's smaller it's not going to get bigger when people shrink that's not how it works needs to get smaller right so we need to make sure that um the sizing of this is smaller than what our logo size is so what you need to do is just shrink this down a bit now you will notice it will kind of um load up there but it's not gonna you're not really gonna notice this shrink at all so if i were to go to 162 it probably ain't gonna shrink yet um so i need to go ahead and set it below a hundred so i'm gonna go ahead and set this to like 72. now you notice it's gonna shrink so that's perfect now my logo shrinks and my menu shrinks as well so it looks really good now if you are having issues where your menu your header isn't shrinking it's because something is in the way now let's say that your um section here your menu nav here is um the the vertical padding is already is about the same size as your logo now you basically can't have any anything the same height as your logo because if you were to see if i were to now go down my logo would shrink but my menu doesn't my header overall doesn't shrink and that's because my nav menu here the height of it is the same size as my logo now you definitely don't want that so i'm going to definitely remove this and you don't want you don't want any any um any margins in here at all you want to make sure that your margins are always set to zero here and same thing on your cart here make sure they're set to zero because like i said um obviously this part except for your card depending on how you're sizing that let me actually go back because that part um doesn't really matter it's mainly your margin and it can be your padding just make sure that the top and bottom are set to zero um so yeah so i'm gonna now that that's set i'm gonna click update and if i were to go to home as you can tell it's shrinking okay so now we just got to make sure that the mobile is also set up as well so let's go ahead and go to my tablet and i mean it's a little smaller so let's let's see how it's set up on tablet already so let's go ahead and click inspect and let's go ahead and bring this down here to about the size and it does shrink as well so that's already all set up but you are able to adjust that as well so make sure you click on your header section and as you can tell it's already set to mobile so you can set the sizing so let's say i wanted to also go to um 60 on mobile and then on tablet it should also on tablet it's fine it should also go to 60 as well so now let me go ahead and go to my home page here now if i were to adjust this you can tell it shrinks now perfectly now let me go ahead and show you guys how this looks like on a um an incognito page so let me grab this link here and go to incognito and there we go that's working perfectly now let's just do this on mobile so on tablet it shrinks it shrinks pretty good to my opinion i don't want to shrink that much and then let's go to um actually this one is more of that oh there we go as you can tell there's a big difference there it shrinks really well so that's pretty much it for this this video actually it's a pretty cool feature so i hope you guys did honestly like it um but yeah that's it for this video if you guys did enjoy this video and it did help you guys out um please consider liking the video and subscribing it'll definitely help out the channel out a lot and as always thanks for watching and i'll catch you guys in the next video

Channel: Uriel Soto

Views: 21,512

Keywords: shrink logo on scroll elementor, elementor sticky header shrink, How to change logo size on scroll in Elementor, How to make logo shrink on scroll in elementor, How to shrink logos on scroll in Elementor, elementor change logo size on scroll, elementor change logo on scroll, elementor sticky header logo shrink, Elementor logo, change logo size with elementor, elementor nav menu, elementor logo header, elementor nav menu logo

Id: 8au9IglS17Q

Length: 7min 58sec (478 seconds)

Published: Tue Aug 04 2020