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.