Implementing a sticky header in Elementor is relatively simple.
1. set the complete header element via „movement effects“ to sticky „top“ and set the offset value to 10.
2. the logo has to be assigned to the class „logo“ so that it can be reduced in size.
3. the header element gets an „own CSS“ code:
/* Background color turns white when scroll */
.elementor-sticky--effects {
background-color:rgba(255,255,255,1);
transition: all 0.5s ease;
}
/* Change color menu on scroll */
.elementor-sticky--effects .elementor-nav-menu a{
color: #333!important;
transition: all 0.5s ease;
}
/* Logo size normal */
.logo img {
width: auto;
max-height: 120px;
transition: all 0.5s ease;
}
/* Logo size on scroll */
.elementor-sticky--effects .logo img {
max-height: 60px;
width: auto;
}
Optionally, the menu itself can also be adjusted a bit to reduce the complete header height.