Mobile header shrink transition issue

Hello all!

I'm happy with the transition between my regular and shrinking header on desktop, but I'm experiencing an odd delay on the max-width transition of the logo in the mobile version. I've been staring at the css for so long that I'm going cross-eyed. Hoping someone here might be able to spot the issue?

Site: https://fife-sunflower-68mk.squarespace.com/
Pw: elipsis

Add this code to bottom of Custom CSS

@media screen and (max-width:991px) {
.header-title-logo img {
    transition: opacity 0.2s ease !important;
}
}

On 10/21/2023 at 7:26 AM, tuanphan said:

Add this code to bottom of Custom CSS

@media screen and (max-width:991px) {
.header-title-logo img {
    transition: opacity 0.2s ease !important;
}
}

 

Thanks @tuanphan! I've added the code but it hasn't fixed the max width delay. Any other ideas?

Try this new code

@media screen and (max-width:991px) {
.header-title-logo img {
    transition: unset !important;
}
}

Thanks @tuanphan, unfortunately this isn't correcting the issue either 😞 I've stripped out all associated code and rewritten it, in hopes that I'd find the issue, but you can see that there's still this delay in the resizing of the logo on shrink that happens only on mobile. Any other ideas?