DAWN THEME: transparent logo not inverted on hover

Store Design
,

Topic summary

A Shopify store owner using the Dawn theme encountered issues with their transparent header’s logo and icons not inverting colors properly on hover.

Initial Problem:

  • Logo failed to invert on hover (though it worked correctly on scroll)
  • Site: themythwys.com

Solutions Provided:

Two community members offered CSS code fixes:

  1. Logo hover fix: Added CSS to control logo inversion behavior
  2. Cart icon fix: Applied filter: invert(0) and color styling to cart icon
  3. Mobile menu issue: Cart icon turned black when opening mobile menu - resolved by wrapping the CSS in a media query (@media (min-width: 750px))

Current Status:

A new issue emerged on product pages where the menu appears white. The helper requested collaborator access to the store to correct the customized CSS code. The conversation remains ongoing as they work to resolve this latest problem through direct messages.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello. I have a transparent header but logo is not inverted on hover. Works alright when you scroll. Thank you!

2 Likes
2

Hey @TheMythGaming

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

{% if template.name != "index" %} 

{% endif %}

RESULT:

Moeed_1-1740988137995.png
Moeed_1-1740988137995.png1888×839 255 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @TheMythGaming

You can add more of this code to do that.

.header-wrapper:hover .header__heading-logo { filter: invert(0); }
1 Like
4

@Dan-From-Ryviu Thank you! It worked. Sorry but one more thing, the cart icon is also not inverted on hover. Please help. Thank you!

1 Like
5

Please add this code

.header-wrapper:hover .header__icon--cart .icon { color: #000 !important; }
1 Like
6

@Dan-From-Ryviu You’re really good! Thank you!

1 Like
7

Very welcome!

1 Like
8

@Dan-From-Ryviu Sorry again but can you help me with this? The cart icon turns to black when I open the menu on mobile version. Thank you!

IMG_1694.png
IMG_1694.png1320×2868 218 KB

9

Please up this code

.header-wrapper:hover .header__icon--cart .icon { color: #000 !important; }

To this

@media (min-width: 750px) {
.header-wrapper:hover .header__icon--cart .icon { color: #000 !important; }
}
1 Like
10

@Dan-From-Ryviu Nice! Thank you again. :grinning_face_with_smiling_eyes:

1 Like
11

@Dan-From-Ryviu Hello! Sorry but I have encountered a problem again. When I go to product page, The menu is white. Help please. Thank you!

IMG_1698.jpeg
IMG_1698.jpeg1320×2198 94.6 KB

12

@Dan-From-Ryviu please help!

1 Like
13

Give me collab request code of your store so I can correct your customized CSS code to solve it.

14

I sent you a DM. Thank you!