Transparent header but when hovered and scrolled down, turns into a solid color + font color change

Solved

Transparent header but when hovered and scrolled down, turns into a solid color + font color change

shaunbulamu
Tourist
5 0 1

How do I make my header change colour when scrolling down and the colour of the text also changes to black when it happens?.

My store URL is https://st4rz.org/ and it currently doesnt change the colour of the text

Accepted Solutions (2)

Stacksols
Shopify Partner
6 3 3

This is an accepted solution.

Hello @shaunbulamu,

Add this code at the bottom of your theme.liquid file. Find and add this code before the </head> tag

 

 

 

<style>
    .solid .header__icon, .solid .localization-selector.link, .solid .header__menu-item{
        color: #000;
    }
</style>

 

 

Screenshot_2.jpg

View solution in original post

JasmeetVT14313
Shopify Partner
292 63 76

This is an accepted solution.

Hi @shaunbulamu 
Add the below code to end of base.css file

header.solid .localization-selector.link, header.solid .header__icon, header.solid .header__menu-item {
    color: rgba(var(--color-background), 0.75);
}

 

If you need further assistance feel free to reach out.
If you find this information useful, a Like would be greatly appreciated. And If this resolves 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

View solution in original post

Replies 2 (2)

Stacksols
Shopify Partner
6 3 3

This is an accepted solution.

Hello @shaunbulamu,

Add this code at the bottom of your theme.liquid file. Find and add this code before the </head> tag

 

 

 

<style>
    .solid .header__icon, .solid .localization-selector.link, .solid .header__menu-item{
        color: #000;
    }
</style>

 

 

Screenshot_2.jpg

JasmeetVT14313
Shopify Partner
292 63 76

This is an accepted solution.

Hi @shaunbulamu 
Add the below code to end of base.css file

header.solid .localization-selector.link, header.solid .header__icon, header.solid .header__menu-item {
    color: rgba(var(--color-background), 0.75);
}

 

If you need further assistance feel free to reach out.
If you find this information useful, a Like would be greatly appreciated. And If this resolves 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