Change transparent header color to white on scroll

Store Design
1

Hi Shopify Experts,

I wish to change my header color to white on scroll but ones it reaches to the top of the page, it should be transparent as it is now (Image below). my shop link is www.pawtietime.com

ridhi01_0-1677567202584.png
ridhi01_0-1677567202584.png2730×146 18.4 KB

Thank you in advance!

2

@ridhi01

For change color of background when header sticky and not sticky follow below steps:

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
sticky-header{
  background: #fff !important;
  transition: all .2s ease; 
}
.shopify-section-header-hidden.shopify-section-header-sticky sticky-header{
  background: transparent !important;
}

This wokrs well for your site.

Best Regards !

3

hi there,

i tried your code but its not exactly what i want.

i want the header to remain as it is currently (transparent) when on the top but only when it moves away from the top, it should turn white.

4

Hi @ridhi01

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1677569110400.png
PageFlyVictor_0-1677569110400.png1600×777 194 KB

Hope this answer helps.

Best regards,

Victor | PageFly

5

thank you so much victor! this worked

6

Glad that i can help you

7

Hi,

I am also interested in the same thing. want to keep my header transparent but white on scroll. I’ve tried this code but it doesn’t change anything other than making my header only transparent. If you could help me that would be great.

My store link: https://esterswim.com/

Thank you.

8

Hello. I am interest to the font for text used in the image above, as I want to use something similar to my page. Can you advise? Thanks!

Andy106_0-1701305658380.png