Make Header Icons White Only While Transparent Header is Visible (Shrine Pro v1.4.4)

Store Design
, , , ,
1

Hi everyone,

I’m using the Shrine Pro Theme (v1.4.4) and I need help implementing something that seems simple but has turned into a real headache.

What I’m trying to do:
Make the header icons (cart, language selector, search, etc.) appear white
only while the transparent header is actually visible.

Once the user scrolls down, the header becomes solid (as expected),
and the icons should return to their default dark color.

I am aware this could be a Theme bug as this only happens since the new Update and on Mobile Page View

Any suggestions, working CSS snippets, or Shrine-specific workarounds would be greatly appreciated!

Website is: de.rejectwokeness.com

Thanks in Advance

2

Hi @GOMAK,

Please go to Customize > Theme settings > Custom CSS and add code:

@media (max-width: 767px) {
    .shopify-section-header-sticky.scrolled-past-header .show-white-icons .header__icons, 
.shopify-section-header-sticky.scrolled-past-header .show-white-icons .header__icons * {
        color: #433d3d !important;
    }
}

If I helped you, then a Like would be truly appreciated.

3

unfortunately doesn’t work

4

Hi @GOMAK,

Please change all code:

@media (max-width: 767px) {
.show-white-icons .header__icons, 
.show-white-icons .header__icons * {
        color: #ffffff !important;
    }
    .shopify-section-header-sticky.scrolled-past-header .show-white-icons .header__icons, 
.shopify-section-header-sticky.scrolled-past-header .show-white-icons .header__icons * {
        color: #433d3d !important;
    }
}
5

well its not that easy, i’ve tried dozens of different codes already, this one doesn’t work either

6

Hi @GOMAK,

Please change all code:

@media (max-width: 767px) {
.shopify-section-header-sticky .header__icons, 
.shopify-section-header-sticky .header__icons * {
        color: #ffffff !important;
    }
    .shopify-section-header-sticky.scrolled-past-header .show-white-icons .header__icons, 
.shopify-section-header-sticky.scrolled-past-header .show-white-icons .header__icons * {
        color: #433d3d !important;
    }
}
1 Like
7

amazing, that one works! Thank you very much, is there also a way go make the language selector (only the icon, not the actual list) in white?

8

Hi @GOMAK,

I checked and didn’t find it, did you disable it?

9

my problem seems to occur because of bugs from the theme, now i changed the theme back to an older version because of these bugs, the code worked for a short time on the old (newer Version) Theme but stopped working for some reason

10

Hi @GOMAK,

I don’t understand, so the language selector doesn’t work for the current version?
What do you want me to check?

11

thw whole Code to which i initially said was working stopped working for whatever reason, i gave up with this Theme version for now…