Solved

Header Logo changing color when scrolling down

MaxManet
Tourist
9 0 0

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

Web: https://stoichumans.myshopify.com/

MaxManet_0-1675870592690.pngMaxManet_1-1675870645437.png

 

Accepted Solution (1)

PageFly-Kate
Shopify Partner
1092 326 320

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 5 (5)

PageFly-Kate
Shopify Partner
1092 326 320

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

RevitaSpice
Tourist
6 0 1

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:

https://revitaspice.com

StoreWatchers
Trailblazer
205 30 35

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.

StoreWatchers_1-1675871232734.png

 

Let me know if need further help. 

 

Regards,

Store Watchers Support Team

StoreWatchers - Automate testing for your Shopify store in seconds


If you find my reply helpful, please hit Like and Mark as Solution
Visit us: App Store | Website | FAQs
MaxManet
Tourist
9 0 0

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.

Arna
Visitor
1 0 0

Would be great to get a solution on this one. Where do I add the second logo?