Article original: https://elementor.com/blog/shrinking-sticky-header/

Exemple sur Vitalogo: https://vitalgo.ca/

1- Mettre la classe .sticky-header sur le container qui est sticky
2- Mettre la classe .logo sur le logo

CSS:
/***
* class: .sticky-header
*/
.sticky-header {
–shrink-header-to: 0.6;
–transition: .45s cubic-bezier(.4, 0, .2, 1);

transition: background-color var(–transition),
backdrop-filter var(–transition),
box-shadow var(–transition);
}

.sticky-header.elementor-sticky–effects {
background-color: #014546;
box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
min-height: 80px;
align-items: center;
}

.sticky-header .logo img {
transition: transform var(–transition);
}
.sticky-header.elementor-sticky–effects .logo {
top: -15px!important;
}
.sticky-header.elementor-sticky–effects .logo img {
transform: scale(.6);
margin-top: 10px;
}

@media only screen and (max-width: 1366px){
.sticky-header.elementor-sticky–effects .logo {
top: 0!important;
}
.sticky-header.elementor-sticky–effects .logo img {
transform: scale(.8);
}
}
@media only screen and (max-width: 1024px){
.sticky-header.elementor-sticky–effects .logo {
top: -10px!important;
}
.sticky-header.elementor-sticky–effects .logo img {
margin-top: 10px;
}
}
@media only screen and (max-width: 767px){
.sticky-header.elementor-sticky–effects .logo img {
margin-top: 0;
}
.sticky-header.elementor-sticky–effects .uael-side{
overflow: visible;
height: 100vh;
margin-top: 80px;
z-index: 999;
}

}

Exemple sur Doverco: https://construction-doverco.com/

Le logo est dans un widget HTML

1- Mettre la classe .sticky-header sur le container sticky

CSS:
@media only screen and (min-width: 1367px){
.sticky-header.elementor-sticky–effects .logo{
transform: scale(.6);
top: -38px;
position: absolute;
transition: transform 0.3s ease, top 0.3s ease;
}
}