How to change logo and text on header while scrolling

Store Design
1

Hello,
How can I change the colour of the texts and logos in my header while the page is scrolling.
I’ve managed to change the background but I can’t find the text and logo.
I would like to change from a transparent header with white text and logo to a white header with black text and logo when scrolling.

I am using dawn 7.0.1.

Thank you very much.

This is my website

https://ashiqi-bijouterie.myshopify.com/

2

hi @abhalo
your site is password protected, please send me the password. I will check it.

3

@ExpertRookie

Sorry for the late reply. I removed the password from the site

4

Hi @abhalo
To make that function you need to change some code in your theme, Please share the store access then we will help you check

5

Hello @abhalo

I would like to give you some recommendations to support you

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before

*You could change the image URL inside my code to your image URL.
Hope my recommendation can work and support you!
Kind & Best regards!
GemPages

6

Woow that’s works very well.

Thank you guys, you are awesome ! :smiling_cat_with_heart_eyes:

@ExpertRookie @GemPages

Best regards !

7

So a second question comes to me.
What if I wanted the header to turn white on mouseover as well?
What line of code should I add?

@GemPages @ExpertRookie

8

Hello @abhalo

Let’s try adding this below code before

Hope my recommendation can work and support you!
Kind & Best regards!
GemPages

9

Works perfectly, thx very much !

10

I’m now trying to apply the same effect on mouse out, but cannot find good solutions, have any idea ?

11

Would this work for Craft 5.0.1 theme also?

Thanks

12

Hello,

I did this but now when i scroll down my header turns white and the content in there turns Bold and i don’t want that. What should i change to keep my header as it was? It used to turn white only when people scrolled up.

Also the logo is too big, how can i change the size?

Site: https://diversusoficialsite.myshopify.com/

pass: Diversusoficial