How to Create Shrinking Header Effect in Elementor - Change Height on Scroll

[Music] foreign [Music] and next we have our shrinking effect which is another very popular one so for this let's go back to our Elemental page so let's disable this one for now and let's go into style so for our main menus on this one that's not sticky I'm gonna add some padding on top and bottom so I'm going to add maybe 30 and again 30 here okay so you can see there's a bit of spacing all around it now let's enter our three elements in the middle because at the moment as you can see the logo is on top this menu is in the middle this one is on top as well so for this we're going to click on the column here and here the vertical align we're going to select middle as you is perfectly centered with the other one and we do the same with this section here in the middle so that looks perfect now and now let's address the settings of our sticky menu so we go back to our navigation menu right here instead of menu we're going to Sticky main menu and this time I'm going to address the inner padding so instead of 30 we're going to leave at 10 and 10 and as you can see now we'll reduce from 30 to 10 so let's put this to the test so let's click on update let's go back to our home page as you can see plenty of breathing space all around it and if we scroll down the page as you can see the size has been reduced so this is how you can shrink your menu section [Music] thank you

Channel: POSIMYTH Innovations - WordPress Tutorials

Views: 11,647

Keywords: elementor sticky header effects, elementor sticky header transparent, elementor sticky header effects on scroll, The Plus Addons for Elementor, POSIMYTH, Elementor Shinking Header Effects

Id: SvgdkSemHy8

Length: 1min 41sec (101 seconds)

Published: Wed Jan 11 2023