Instructions

• Make sure you Elementor Pro installed on your website.
• Make sure your logo doesn’t have any width settings
• Make sure your header isn’t higher as 90px
• Make sure your header has a minimum height of 90px
• Add a css class to your logo. Change the pixels to fit your logo design.
• The custom css code

Put this part on your main section

Put this part on your main section

selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.5)!important
}

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

Put this part on your logo image (don’t forget to give the logo a class of “logo”)

.logo img { 
max-width: 140px; 
height: auto; 
transition: all 0.5s ease; 
} 

.elementor-sticky--effects .logo img {
max-width: 120px;
height: auto; 
}