Header turns solid white on scroll

Highlighted
New Member
2 0 1

Hello,

I currently have my header at transparent so you can see the image below it and then fixed so that it always stays with you as you scroll down the page. 

I want to add the ability for the header bar to turn solid white when you scroll down. How do you do this? 

Also, if I want the logo to change colors (currently it's white on the transparent header) to black (on a solid white header) when you scroll how would I do that? Following that train of logic, how would I adjust the navigation links as well to change color when you scroll? 

Thank you!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1055 62 124

Hi there Andy!

Don here from Shopify. :)

Thanks for reaching out here on our merchant forums with your query.

This might be something we can put in place internally here under the Shopify Design Policy if you are using a free Shopify-built theme and are on a paid plan.

I will send an email to the address we have on file for you shortly so we can get this checked out for you and edited if possible.

All the best!


Regards,
Don

Don | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
1 0 0

I'm using brooklyn theme. How do I make my header transparent to see the image behind and turn solid upon scroll?

0 Likes
Highlighted
Tourist
8 1 5

Is there any solution for the implementation of this design behavior??

0 Likes
Highlighted
New Member
1 0 0

Don, Can you please send me this information as well? 

0 Likes