Blur Sticky Header Tutorial

Blur Sticky Header Tutorial


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

   background-color: rgba(0,0,0,0.4)!important; 
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   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