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

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

Hello @shaunbulamu ,

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


1 Like

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!

1 Like