Header change colour on scroll + header only transparent on home page

Header change colour on scroll + header only transparent on home page

Vitalum
Tourist
10 0 1

Hi there,

 

I would like my header's text + image to change on scroll. I want all text and icons to be black. Additionally, I would like this only to affect the home page, the other pages should have a different header that is not transparent and will not change colour on scroll.

 

Theme: Sense

Website: Vitalum.co.uk

 

Thanks for any help!

Replies 2 (2)

JasmeetVT14313
Shopify Partner
292 63 76

Hi @Vitalum 
Can you try adding the below code just before </body> in "theme.liquid"

{% if template contains 'index' %}
<style>
.scrolled-past-header .header-wrapper.gradient .header__menu-item{
color: #000 !important;
}
#shopify-section-sections--21191392100685__header span.h2{
color: #000 !important;
}
.header__icon{
color: #000 !important;
}
<style>
{% endif %}

If you'd like to discuss this more, don't hesitate to send me a PM.

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
Vitalum
Tourist
10 0 1

Hi there, this has made it black in both instances. I would like it white when not sticky and black when sticky. Thanks for your help.