Resources

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

Don’t just copy and paste the code on your header. It only works if you follow the steps in the tutorial

Some of the links on this page could be affiliate links, where I earn a commission if you make a purchase via my link. This helps me continue to create the free content that I put out. I will only promote companies that I really believe are worth your money. Thanks a lot if use my links to make a purchase.