A Shopify Dawn theme user faces a visibility issue: their white logo disappears when scrolling because the transparent header turns white.
Proposed Solutions:
invert(1) filter to the logo image in base.css when the header is not transparent, which would flip the white logo to blackOpen Questions:
The discussion remains ongoing with implementation details and customization variations still being clarified.
Hello.
I am using the Dawn theme on my Shopify store. My header is transparent with a white logo, so when I scroll down the header turns white, making the logo invisible.
I would like the logo to turn black when scrolling down to ensure it remains visible.
Thank you in advance
Max
Hi @MaxManet ,
This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:
.header:not(.site-header-transparent) img {
filter: invert(1);
}
I hope it would help you
Best regards,
Kate | PageFly
Hi @MaxManet
Greetings from the Store Watchers Support Team! Happy to help you today.
I have looked into the code, you will have to add a black logo image as well which will show only when scrolling down.
Let me know if need further help.
Regards,
Store Watchers Support Team
Hi @StoreWatchers thank you for your reply. Do I need to code it? If yes where and what code? Or just upload logo in theme customize.
Is it possible to change the color to something different. Your solution did make the color change on my logo from White to Black, but I’m trying to change my color from White to Yellow (#F6CB16)
Any help is much appreciated. Thanks!
You can see the current site here:
Would be great to get a solution on this one. Where do I add the second logo?
