How to create a Shrinking Sticky Header in Elementor

/* shrinking header section */

.shrink-header {
	background:rgba( 255, 255, 255, 0.01 );
	backdrop-filter: blur( 25px );
    height: 15vh !important;
	transition: all .5s linear!important;
}

.shrink-header.elementor-sticky--effects {
	background: rgba(199, 199, 199, 0.68);
	height: 10vh !important;
	backdrop-filter: blur( 50px );
	padding-top: 2px!important;
	padding-bottom: 2px!important;
  transition: all .5s linear!important;
}

/* shrinking header section */

.elementor-button {
    padding: 15px 40px!important;
    font-size: 1.2rem !important;
    transition: all .5s linear!important;
}


.shrink-header.elementor-sticky--effects .elementor-button{
    padding: 12px 32px!important;
    font-size: 1.1rem !important;
    transition: all .5s linear!important;

}

/* Shrinking menu with Font-sizes */
.menu {
    font-size: 1.2rem !important;
    transition: all .3s linear!important;
}


.shrink-header.elementor-sticky--effects .menu{
    font-size: 1.1rem !important;
    transition: all .3s linear!important;
}


/* Changing color of the menu items */
.shrink-header.elementor-sticky--effects .elementor-nav-menu a{
    color: #333 !important;
    transition: all .3s linear!important;
}

/* shrinking logo image */

.logo img {
	width: 8vh !important;
	transition: all .5s linear!important;
}

.shrink-header.elementor-sticky--effects img {
	width: 7vh !important;
	transition: all .5s linear!important;

}


/* Tablet and Mobile Menu Shrinking */

@media screen and (max-width: 1024px) {
	/* shrinking background */
	
.shrink-header.elementor-sticky--effects {
height: 8vh !important;
	padding-top: 2px!important;
	padding-bottom: 2px!important;
	transition: all .5s linear!important;
	
}
	
	/* shrinking image */

.shrink-header.elementor-sticky--effects img {
	width: 6vh !important;
	transition: all .5s linear!important;
}
	
	/* shrinking menu */

.shrink-header.elementor-sticky--effects ul li a {
	font-size: 1rem!important;
	font-color: black;
	transition: all .5s linear!important;
}

/* shrinking button */

.shrink-header.elementor-sticky--effects .elementor-button {
	padding: 10px 32px!important;
	transition: all .2s linear!important;
}

}

@media screen and (max-width: 460px) {
	/* shrinking background */
	
.shrink-header.elementor-sticky--effects {
  height: 8vh !important;
	padding-top: 2px!important;
	padding-bottom: 2px!important;
	transition: all .5s linear!important;
	
}
	
	/* shrinking image */

.shrink-header.elementor-sticky--effects img {
	width: 5vh !important;
	transition: all .5s linear!important;
}
	
	/* shrinking menu */

.shrink-header.elementor-sticky--effects ul li a {
	font-size: 1rem!important;
	font-color: black;
	transition: all .5s linear!important;
}

/* shrinking button */

.shrink-header.elementor-sticky--effects .elementor-button {
	padding: 10px 32px!important;
	transition: all .2s linear!important;
}

}