Headerfarbe beim Scrollen ändern

[72names]

Liebe Shopify Community,

Ich fange gerade an, einen Shop zu bauen. Ich nutze das Dawn 10 Theme und habe auf der Homepage einen transparenten Header mit weißen Icons. Nun versuche ich es hinzubekommen, dass sich die Farbe der Icons beim Scrollen zu schwarz ändert. Da ich gehört habe, dass sich ein veränderter Code bei einem Update des Themes überschireben wird, habe ich es mit Costum Liquids und Costum CSS erstellt (siehe Code weiter unten).

Folgende Probleme treten zudem auf:

1. In der Desktop Ansicht ist die Suchbar sichtbar trotz der Anpassungen. 

2. In der Full Screen Ansicht sind die Icons schwarz trotz der Anpassungen. 

CODE:

1. Transparrenter Header. Costum Liquid an erster Position über dem Header:
{% if template == 'index' %}
<style>
.shopify-section-group-header-group.announcement-bar-section{
height: 5px;

}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 20px;
}
</style>
{% endif %}

2. Weiße Icons & entfernen der Suchfunktion. Costum CSS im Header:
@media (max-width: 767px) {
.header__icon span svg,
.header__icon a svg {
color: white;
}
.header__icon--cart .icon {
color: white;
}
.cart-count-bubble {
background: white;
}
}
@media screen and (max-width: 600px) {
.header:not(.header--top-center) * > .header__search,
.header--top-center > .header__search {
display: none;
}
.header:not(.header--top-center) > .header__search,
.header--top-center * > .header__search {
display: none;
}
}

Ich bedanke mich für jede Hilfe im Voraus!

[Finer · Accepted solution]

@72names, wenn sich die Farbe erst beim Scrollen ändern soll, wirst du auf ein Script zurückgreifen müssen. Die CSS-Einstellungen sind in diesem Zusammenhang eher statisch zu betrachten.

Was die Icon-Farbe angeht, so kann es sein, dass du das CSS Attribut "fill" statt "color" verwenden musst, da es sich um SVGs handelt, deren Farbe ggf. über das "fill" Attribut definiert wird.

Was die Update-Fähigkeit eines Themes angeht, würde ich abwägen, was dir wichtiger ist.

Solange man alles im Code gut dokumentiert, lassen sich Updates auch manuell innerhalb von wenigen Stunden durchführen. Darüber hinaus musst du nicht jedes Update mitmachen. Wenn eine Anpassung des Codes wichtig ist, damit die Kundenerfahrung davon profitiert (und mehr Umsatz zu erwarten ist), würde ich das immer dem automatischen-Update vorziehen. Das ist aber meine persönliche Meinung 😉

[72names]

Kannst du mir helfen, dass so hinzubekommen, wie bei dieser Seite: Fear of God ?

[Gabe]

Hey @72names 

Hier auch ein Leitfaden mit einem ähnlichen Thema. Und hier dank auch unserer @AnnaBe!

Weitere hier.

VG,