Change header and logo color when scroll or hovver

Technical Q&A

Topic summary

A Shopify store owner using the Dawn theme seeks help implementing a dynamic header design with the following requirements:

Desired functionality:

  • Transparent header with white logo at the top of the page
  • On hover or scroll, header background changes to white and logo switches to black
  • Sticky header behavior throughout scrolling
  • Smooth animation during the color transitions

Development process:

  • Initial CSS solution was offered but didn’t fully address the requirements
  • A collaborator (Dan-From-Ryviu) requested access using code 7437 and was granted permission
  • Implementation was attempted but encountered issues

Current status:

  • The user restored a backup theme due to problems with their previous version
  • New issue emerged: product page buttons are displaying abnormally large (5x normal size)
  • The discussion remains unresolved with the user requesting continued assistance for both the header functionality and the button sizing problem
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello i need help,

I have the dawn theme

And i want to add a new design for myheader , i want the header to be invisible with a white logo when i’m at the top of the page ,when i hover on it or scroll down , the header change colour to white and the logo change to black . I thank you in advance for helping me !

Here is a website example that has the same design that i want :https://nourished3.eu/en-fr?currency=EUR

MY store : https://7968dc-f5.myshopify.com/

2

Hello @Sohayl67

Online Store —> Themes —> actions —> edit code—> theme.liquid file, and add this code after

If this was helpful, hit the like button and accept the solution.
Thanks

3

If you don’t mind, please let me know your ‘Collaborator request code’ so I can send a collab request to access your theme so I can help you.

4

The issue is that i want that the header is transparent and the logo white but when i hover on it or i scroll down , the color of the header goes to white and the logo to bblack. and i want that the header is sticky (if you can add animation of the logo changing and the header going from transparent to white ). i WANT the header to be like the same system that this website : https://www.vorelli.co.uk/

5

7437 , and please

The issue is that i want that the header is transparent and the logo white but when i hover on it or i scroll down , the color of the header goes to white and the logo to bblack. and i want that the header is sticky (if you can add animation of the logo changing and the header going from transparent to white ). i WANT the header to be like the same system that this website : https://www.vorelli.co.uk/

6

I got it. Request sent

7

i accepted the demand

1 Like
8

Got it, please wait for a while

9

Please check now

10

Nothing changed sir !

11

Did you change the theme?

12

sorry i have a new problem on my old so i used a backup theme and the backup has also an issue the button are very vvery big

13

can you help with this ?

14

if you look in any product the caracter of thebutton a 5x times morebigger than normal and also in the all product page the button are giant !!! help me for this plz