Instructions
Watch the video tutorial and follow all the steps. Check out my example versions for a white menu or a dark menu.
- 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
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;
}Don’t just copy and paste the code on your header. It only works if you follow the steps in the tutorial.
