CSS Snippet

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #000000;
    --transition: .3s ease-in-out;
    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px!important;
    padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
} 

Some properties on the CSS code above that you need to notice are:

• header-height: This property is used to control the height of the header (which set to 90px in this example). If you want to change the value, make sure to change both values: on the CSS code and on the header section’s settings.
• opacity: This property is used to control the degree to which your shrinking header is transparent. You can use a value between 0 to 1. In this example, we use the value 0.90.
• shrink-me: This property is used to control the degree to which your header and logo shrink when a visitor starts to scroll down. You can use the value between 0 to 1. We use the value 0.80 in this example. This value will make your header and logo shrink to 80 percent from the initial size.
• sticky-background-color: This property is used to control the color of the shrunken header (the header that appears when a visitor scrolls down). You can use a color name (i.e. red) or the hex code of the color. In this example, we use the hex code of 0e41e5 which represents blue.
• transition: This property is used to control how long it takes for the header to shrink from its initial size.