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

[shaunbulamu]

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

[Stacksols · 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>

 

[Stacksols · 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>

 

[JasmeetVT14313 · 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!