Elementor - Shrinking Sticky Header On Scroll

All credit for this brilliant tutroial goes to Jeffrey @ Lytbox. Link >> here <<.

This tutorial assumes you have a basic understanding of Elementor’s containers and widgets.

Start by creating your Elementor Header.
Give your Header Container a padding of 12px and add “100” to the z-index under the Advanced tab.
Give your container the class value “shrinker” under the Advanced tab.
While still in the container, under Motion Effects, select Sticky > Top.
Under that set the Effects Offset to 60.
Give your logo the class value “shrinking-logo” under the Advanced tab.
Go to Site Settings and add the following CSS:

				
					/* shrinking header section */
.shrinker {
	background: transparent;
        height: (set your header height in pixels);
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}
.shrinker.elementor-sticky--effects {
	background: #fff;
        height: (set your header height after shrinking in pixels)!important;
	padding-top: 2px!important;
	padding-bottom: 2px!important;
	box-shadow: 0px 6px 30px -4px rgba(0,0,0,.05);
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}

Now copy and paste the following code into the area just below the first set of code:

				
					/* shrinking logo image */
.shrinking-logo img {
	width: 150px!important;
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}
.shrinker.elementor-sticky--effects img {
	width: 120px!important;
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}

You want to set the first width number to the width of your logo.
Then you want to set the second width number to the size you want your logo to shrink to.
Now copy and paste the following CSS to shrink your Menu:

				
					/* shrinking menu */
.shrinker.elementor-sticky--effects ul li a {
	font-size: .9rem!important;
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}

If you also have a button, like the author of this tutorial, you can add the following CSS to shrink your button:

				
					/* shrinking button */
.shrinker.elementor-sticky--effects .elementor-button {
	padding: 10px 32px!important;
	transition: all .2s linear!important;
	-webkit-transition: all .2s linear!important;
	-moz-transition: all .2s linear!important;
}

Like the logo, you are going to adjust your button padding to a higher number than the CSS padding to give the button a shrinking effect.
And he gives us more CSS for Tablet and Mobile:

				
					/* Tablet and Mobile Menu Shrinking */
@media screen and (max-width: 1024px) {
	/* shrinking background */
	
.shrinker.elementor-sticky--effects {
	background: #fff;
	padding-top: 2px!important;
	padding-bottom: 2px!important;
	box-shadow: 0px 6px 30px -4px rgba(0,0,0,.05);
}
	
	/* shrinking image */
.shrinker.elementor-sticky--effects img {
	width: 100px!important;
}
	
	/* shrinking menu */
.shrinker.elementor-sticky--effects ul li a {
	font-size: 1.2rem!important;
}
/* shrinking button */
.shrinker.elementor-sticky--effects .elementor-button {
	padding: 10px 32px!important;
}
}
/* End Of Shrinking Sticky Menu */

I didn’t really need the extra CSS for Tablet so I changed the @media screen value to 720px.

Also, if you are finding that resizing your browser dynamically to view Desktop, Tablet and Mobile does not resize your Header, use this code in the Header Container under Advanced > Custom CSS.

				
					.shrinker {
    width: 100% !important;
}

This code snippet will force your header to resize with the browser.

Thank you Jeffrey @ Lytbox!