How can I alter the header text color in the Dawn theme?

Store Design
1

Hi everyone,

I’m currently working on my website design aspect and could use some advice. My goal is to enhance the header’s text visibility as the user scrolls down the page. Initially, when the user is at the top of the main page, the header text color needs to be white (also need to figure out how to change the color of the header text when normally displayed). And when the page is scrolled down and the sticky header activates, I want the text color to switch to black. This change is essential to maintain legibility against the sticky header’s white background.

I’m looking for suggestions or code snippets that could help me achieve this seamless transition in text color.

Any insights or experiences you’ve had with similar design challenges would be greatly appreciated!

Website: Aromidy.com

Password: Aromidy2023

Thank you in advance for your help!

2

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below after element
1 Like
3

Hi @Aromidy ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

1 Like
4

Thanks a lot for the solution Dan!

It worked perfectly :grinning_face:

1 Like
5

Thanks again Oliver!

This solution worked great.

6

You are very welcome @Aromidy