Good day. I need help with the header of the site I'm recreating. I want these two headers to be sticky with the logo shrink. But I only managed to make the bottom header to work. The first section even if I set the position to sticky it will not work. The second section has position sticky on it and it is working perfectly along with the Shrink Logo. I just need the two of the headers to stick on top of the website. Thank you.

This is the only code I placed in the section.

/*-- New class when sticky is turned on 'elementor-sticky-effects' -*/
/*-- give the logo image a class called 'sticky-logo'  --*/

.elementor-sticky--effects .sticky-logo img {
    width: 120px!important;/*-- edit the pixels to change to desired shrinking size --*/

.sticky-logo img {
    transition: .2s all ease-in-out;

@media screen and (max-width: 767px) {
    .elementor-sticky--effects .sticky-logo img {
    width: 90px!important;/*-- edit the pixels to change to desired shrinking size for mobile --*/

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.