Headerfarbe beim Scrollen ändern

Deutsch Diskussion Shopify Design
,

Topic summary

Ziel: Auf der Startseite (Dawn 10) soll ein transparenter Header mit weißen Icons beim Scrollen die Icon-Farbe auf schwarz wechseln. Anpassungen wurden via Custom Liquid (über dem Header) und Custom CSS vorgenommen, um Theme-Updates zu überstehen.

Aktuelle Probleme:

  • In der Desktop-Ansicht bleibt die Suchleiste sichtbar, trotz CSS zum Ausblenden.
  • In der Fullscreen-Ansicht sind die Icons schwarz, obwohl sie weiß sein sollten.

Technische Basis: Code-Snippets sind zentral (Custom Liquid für transparenten Header; CSS-Media-Queries für Icon-Farbe und das Verbergen der Suche). Es wird ein Beispiel-Link zu fearofgod.com genannt.

Rückmeldungen/Empfehlungen:

  • Ein Farbwechsel „beim Scrollen“ erfordert ein Script (JavaScript); reine CSS-Regeln sind dafür zu statisch.
  • Bei SVG-Icons ggf. das Attribut „fill“ statt „color“ verwenden, da die Farbe oft über „fill“ gesteuert wird.
  • Zum Thema Update-Fähigkeit: Manuelles Nachziehen von Änderungen ist möglich; nicht jedes Update ist zwingend. Priorisierung der Nutzererfahrung empfohlen.

Ressourcen: Verlinkter Leitfaden zu einem ähnlichen Thema und weitere Suchergebnisse.

Status: Keine abschließende Lösung. Nächste Schritte: Scroll-Script implementieren, SVG-Farbsteuerung (fill) prüfen und den Leitfaden nutzen.

Summarized with AI on January 24. AI used: gpt-5.
1

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’ %}

.shopify-section-group-header-group.announcement-bar-section{ height: 5px; } .header-wrapper{ position: absolute; width: 100%; background: transparent; } .header-wrapper .header{ margin-top: 20px; }

{% 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!

2

@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 :wink:

1 Like
3

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

4

Hey @72names

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

Weitere hier.

VG,