Help with transition logo size in sticky header

How To
1

Dear community
I need your help to get a smooth transition in the logo size when the user scrolls the page and the header is sticky. I’ve done it several times but this is the first time in Bricks and it does not work.

Please take a look at this link. As you can see the transition in the size is not working :confused:

This is my configuration:

setup-bricks
setup-bricks594×598 15.9 KB

Could you tell me where the error could be?
I’ll appreciate your help with this.
Best regards

2

It’s always difficult to change height: auto to height with pixels with transition in CSS.
Try to use max-height instead. Plus, you define transition in the wrong place. The logo element consists of a parent link a and img. You change size of img, but defined transition for link.

Here is a fixed code:

header.sticky %root% img {
    height: auto;
    transition: .4s ease; // added transition to img element
    max-height: 250px; // any value bigger than logo size
}
header.sticky.scrolling %root% img {
    max-height: 50px;
2 Likes
3

Hi there.
Thanks so much for the solution and explanation.
This works like a charm.
Warm regards.