Instructions
Watch the video tutorial and follow all the steps. Check out my example version for a blur sticky header.
- Make sure you Elementor Pro installed on your website.
- Make sure your logo has width settings if it’s an .svg
- Make sure your header has an height of 135px and a bottom margin os -135
The custom css code
Put this part on your main section
selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.4)!important;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
selector{
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}Don’t just copy and paste the code on your header. It only works if you follow the steps in the tutorial.
