FROM CACHE - de_header
Gelöst

Headerfarbe beim Scrollen ändern

72names
Tourist
4 0 0

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!

 

1 AKZEPTIERTE LÖSUNG

Finer
Shopify Expert
2038 426 728

Erfolg.

@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 😉

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Finer
Shopify Expert
2038 426 728

Erfolg.

@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 😉

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
72names
Tourist
4 0 0

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

Gabe
Shopify Staff
17423 2754 4066

Hey @72names 

 

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

 

Weitere hier.

 

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog