Change header background color during scroll for all pages except homepage

Shopify Discussion
1

Hello, I hope someone can assist me please. During scroll, my header background changes from transparent to black (#181818). Can someone help me apply white background for it for all pages except homepage? Please without changing the homepage (I still want it transparent then black during scroll). Thank you!

2

Hello @glucinth ,

Do you remember where you added this code

.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: #181818!important;
  
}

If yes replace it with this one

{% if template != 'index' %}
.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: #181818!important;
  
}
{% endif %}

Regards
Guleria

3

Hello this almost did the job but the problem now is my home page no longer has a background header when scrolled. Can you help me fix it please?

1 Like
4

Strange but I can’t find your store URL again.

btw remove previous one and use this code

{% if template == 'index' %}
.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: #181818!important;
  
}
{% else %}
.shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper {
   background-color: #ffffff !important;
  
}
{% endif %}
5

Hello, here’s my url: bhlclothing.com

I am now using this code to be specific please see below style. However, it also prevents my widgets (chat support and rewards) in appearing. I think I am almost done here. I just need my widgets back :disappointed_face:

{% if template == 'index' %} .shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper { background-color: #181818!important; } {% else %} .shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper { background-color: #ffffff !important; } {% endif %}
6

Already fixed it missed to put in the end. Thank you for the help!!