When you have a transparent header with a white logo over a hero image, the logo becomes invisible against a white sticky header when scrolling. The solution is to use two logo images and toggle visibility with CSS.
Upload your alternate logo as a secondary image and use the .header.shrink class (applied on scroll) to hide the first logo and show the second. This requires adding the second logo via code injection.
/* Add second logo in Header Code Injection:
<img class="alt-logo" src="YOUR_DARK_LOGO_URL" alt="Logo"> */
.alt-logo {
display: none;
max-height: 60px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.header.shrink .header-title-logo img {
opacity: 0;
transition: opacity 0.3s ease;
}
.header.shrink .alt-logo {
display: block;
opacity: 1;
transition: opacity 0.3s ease;
}Generate this with our Sticky Header toolTry it free →
