Header shrink on scroll, control size

[thoughton]

Hi Andrii,

When I scroll the header logo shrinks. How can I control how much it shrinks by? I’d like it to shrink exactly 50% (from 200px to 100px), to avoid bluriness.

If possible could you please just tell me what the CSS should be, and not a downloadable file.

Also is it possible to change the transition for the shrunk logo? Currently it expands from the bottom left corner. I’d rather have a different transition, or no transition at all.

Cheers,

Tim

[satori]

Hey Tim,

the height of the contracted logo on mouse scroll is determined by the “max-height” declaration for the “.small-logo” CSS class (the theme’s main “style.css”, line 258); you can set its value to any required height. The same class has declarations that govern the transition of the logo from its normal size to the contracted size – you can change them or delete them altogether to control how the logo switches its states.

Sincerely,
Andrii / Satori Studio

[thoughton]

Thanks Andrii!

[Author]

Posts