Snippet: Swap Sticky Header Logo on Shrink

  • Updated:

This CSS makes the logo swap only when the header begins shrinking, instead of changing as soon as it becomes sticky.

#site-header-sticky-wrapper.is-sticky #site-header:not(.sticky-header-shrunk) .logo-img[data-nonsticky-logo] {
    display: revert;
}

#site-header-sticky-wrapper.is-sticky #site-header:not(.sticky-header-shrunk) .logo-img[data-sticky-logo] {
    display: none;
}
Learn how to add custom CSS to your site.
Back To Top