How to Resize or Scale the Logo on Scroll

Dev Tutorials

Last Updated: Time to Read: 1 minute

On sites with large headers or logos, it may be best to scale down the logo on scroll when using a sticky header so the header bar can remain narrow and out of the way of the site content. This tutorial uses Custom CSS to set a maximum height the logo can be on the header when it is specifically in the scrolled state.

That’s it! The header shrink is already scripted into Layers, so you need only enable Sticky Header under the HeaderStyling options in the Customizer.

Now lets break down the style so you understand it:

.header-sticky The class added to the header container to make it stick to the top of the browser window on scroll.

.is_stuck_show This class is added to the header container after the trigger (a specific number of pixels) has been scrolled so the header knows it is now in a scrolled and stuck state. Because it shares the same container as header-sticky , they are conjoined (there is no space between them when the style is contructed).

.site-logo Selects the logo element

img Selects the image tag inside the logo element. We want to apply the height limit to the image itself rather than its container, since the logo is not being forced to a specific height percentage for that to work.

max-height  This property takes a pixel or percent value (ideally) and should be set to the limit you want. In most cases, 30-60px is a good size for a sticky header.

Using the Snippet

Place CSS snippets like this or ones you create into the CSS panel in the Customizer, or use the DevKit plugin to add it to your preferred view panel.

Recommended Reading