Blur Sticky Header Tutorial

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;
}

let’s try