Transparent Sticky Header That Changes Color After Scrolling Past Image Banner

Store Design
, , , , ,
1

Looking to implement a sticky header like the website here: www.bellavitaorganic.com

Where menu text/icons/logos are white and the header is transparent while above image banner and when you scroll past the image banner, the menu/icons/logo is black while the header is white. I would like to keep the header white for other pages. I’m using the Dawn theme.

Thanks!

Store URL: www.faithandyou.in

2

Please change the setting to make header sticky then I can provide the code to do your request

3

ok done, can you please provide the significant amount of custom coding now please.

THANKS!

4

Go Online store > Themes > Edit code > open header.liquid, add this code below after element

{% if template == 'index' %}

{% else %}

{% endif %}
5

Hello @Dan-From-Ryviu

I went to header.liquid but code not locate element

Did you by any change mean theme.liquid?

6

Yes, I mean theme.liquid

7

ok thanks, let me just try it

8

@Dan-From-Ryviu ! YOU ARE THE BEST G GOATED YOU ARE GOD THANKS SO DAMN MUCH

Btw remember that person you helped add this

Screenshot 2023-12-29 at 8.39.46 AM.png
Screenshot 2023-12-29 at 8.39.46 AM.png575×244 132 KB

he kept his promise and bought you 3 coffees!

9

Thanks and very welcome

10

@Dan-From-Ryviu

Can you pls help me with one more thing,

it turns into a white header WAY to fast. Can it wait until scrolled past slideshow or all the menus on the header.

It just turns white after announcement bar, give it time

Thanks again SO much

11

@Dan-From-Ryviu

pls help

12

@Dan-From-Ryviu

CAan i have the code pls

13

ps is there anyway to only make it be on homepage

14

@Dan-From-Ryviu

Can you also tell me how to make the cart icon white when header is transparent but when we scroll it turns white

Thanks

15

@Dan-From-Ryviu

Can you pls help me with one more thing,

it turns into a white header WAY to fast. Can it wait until scrolled past slideshow or all the menus on the header.

It just turns white after announcement bar, give it time

Thanks again SO much

16

Please try to update code to this and check

{% if template == 'index' %}

{% else %}

{% endif %}
17

dude, how the freaking hell are you so goated!

1 Like
18

For People Who Also Want To Change From Transparent Header To White On Scroll With Black Text & Icons-

Go To Your Shopify Admin > Themes > Edit Code > theme.liquid and paste the following code anywhere between to

{% if template == ‘index’ %}

.scrolled-past-header .header-wrapper { background-color: #fff; transition: background-color 800ms ease; } .scrolled-past-header .header-wrapper * { color: #000000; transition: color 800ms ease; }

{% else %}

.shopify-section-group-header-group .header-wrapper { background-color: #fff; __/*your colour choice*/__ } .shopify-section-group-header-group .header-wrapper * { color: #ffffff; }

{% endif %}

1 Like
19

Hi Aryavk,

Is there any possibility you could help me with this please?

I am a first timer to shopify and coding, I did copy and paste the code but it didn’t work?

I am using the Sahara theme and would like the white header with black logo appearing once past the image banner also.

Thanks in advance.

20

Hi Dan

Can you please help me with this for my store.

I am new to Shopify and coding so would really love your help.

I just want the header to turn white with black logo once its down past the initial image banner on home page?

Can you help please and thank you?