How to Create Blurry Sticky transparent Header in WordPress with Elementor

 

 

Code snippet for Blurry Sticky Header:

selector{
    --background: #000000a6;
    --blur: 10px;
    --height: 80px;
}
selector.elementor-sticky--effects{
    background: var(--background) !important;
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
}
selector.elementor-sticky--effects .elementor-container{
    min-height: var(--height);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}