Aktiven Navigations Link im Header Farbe anpassen

[Clavela]

Hallo

Ich nutze das Dawn Theme und möchte den aktiven Link in der Navigation in einer anderen Farbe anzeigen lassen (damit es zum Corporate Identity passt). Kann mir jemand helfen, wie ich das im CSS am sinnvollsten anpasse?

Achtung, ich möchte nicht die Links, welche nicht in der Navigation sind verändern, diese sollen unberührt bleiben.

So sieht es aktuell aus (Print Screen von Shopify Shop)!

Gewünscht ist, dass die Farbe so dargestellt wird (Print Screen von Webseite):

Vielen Dank.

[Gabe]

Hey @Clavela 

Du kannst verschiedene Dinge machen um dein Menü farblich darzustellen und somit euer Branding so richtig betonen. Da ich euer genauen gelblichen Farbton und HEX Code nicht kenne, werde ich die Farbe Rot als Beispiel verwenden, dass man beispielweise für einen SALE Menüpunkt verwenden kann, die man entweder im CSS mit "red;" oder dem hexadezimaler Farbcode Wert bezeichnen kann, was eine präzisere Spezifikation erlaubt indem es eine Mischung aus den Rot-, Grün- und Blaukomponenten (RGB) der Farben verwendet.

Hex-Codes beginnen typischerweise mit einem # gefolgt von sechs Ziffern, wobei die ersten zwei Ziffern den Rotwert, die mittleren zwei den Grünwert und die letzten zwei den Blauwert repräsentieren. Zum Beispiel steht #FF0000 für reines Rot.

Siehe meinen Video zu wie du das machen kannst hier.

Der CSS für den ersten Top-Level Menüpunkt:

/* Färbt nur den Text des ersten Hauptmenüpunkts rot */
.header__inline-menu
  .list-menu
  > li:nth-child(1)
  > header-menu
  > details
  > summary {
  color: red;
}

Der CSS für den zweiten Top-Level Menüpunkt:

.header__inline-menu .list-menu > li:nth-child(2) .header__menu-item {
  color: red;
}

Der CSS für den letzten Top-Level Menüpunkt:

.list-menu li:last-child a {
  color: red !important;
}

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Clavela]

Hallo

Ganz herzlichen Dank, für Deine Unterstützung und den CSS Code.

Ich fürchte, ich habe mich nicht exakt genug ausgedrückt.

Ich möchte die Links in der Navigation, wenn diese aktiv sind in goldgelb  CFC242 anzeigen lassen, inaktive Links sollen weiß bleiben.

Das Farbschema Schema (im Content Management Bereich) hat aber keine Einstellungsmöglichkeit für die Farbe "aktiver Link". Nun dachte ich, dass dies vielleicht mit CSS zu machen ist.

Der Code, von mir unten stimmt aber so nicht, da fehlt auch noch die class und in welches css template gehört der Code dann, an welche Stelle? Kann der unten im CSS template dann eingefügt werden oder muss ich im Template selbst das überschreiben?

Ich habe hier mal anglegt, was ich genau meine, ich denke das hilft, um zu verstehen, was ich meine:

/* Grundlegende Link-Styling für inaktive Links */
nav a {
color: #FFFFFF; /* Weiße Farbe für inaktive Links */
text-decoration: none; /* Entfernt die Unterstreichung */
}

/* Stil für aktive Links, die auf die aktuellen Seite zeigen */
nav a.active, nav a:hover {
color: #CAB457; /* Goldene Farbe für aktive Links */
}

Was ich nicht möchte, das es andere Seitenlinks beeinflusst, in der Farbgebung, ich spreche ausschliesslich vom Menue im Header.

Vielen Dank und viele Grüsse

[Gabe]

Hey @Clavela 

Dieser CSS den du oben gepostet hast ist der den du brauchst oder wie genau macht er es nicht? Diesen einfach an deine bestimmten Bedürfnisse anpassen im Code. Bei weiteren Fragen werde ich dich an einen unserer Experten und Programmierer verweisen - gerne kann ich welche empfehlen! 😉

/* Grundlegende Link-Styling für inaktive Links */
nav a {
  color: #FFFFFF; /* Weiße Farbe für inaktive Links */
  text-decoration: none; /* Entfernt die Unterstreichung */
}

/* Stil für aktive Links, die auf die aktuellen Seite zeigen */
nav a.active, nav a:hover {
  color: #CFC242; /* Goldgelbe Farbe für aktive Links */
}

Ist das was du meinst? Mir ist es nicht ganz klar was du meinst...

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Clavela]

Hi @Gabe 

Vielen Dank für Deine Unterstützung, ja genau, der aktive Link bleibt einfach nicht golden, sondern wird nach dem Klick wieder weiss. Und die Unterstreichung nimmt es auch nicht raus, aber damit könnte ich noch leben. Was stimmt mit dem Code nicht, dass der aktive Link nicht Golden bleibt? Vielen Dank.

[Gabe]

@Clavela 

Wir schaffen das! Probiere diesen mal aus:

/* Grundlegende Link-Styling für inaktive Links im Header-Menü */
.header__inline-menu .header__menu-item, .header__inline-menu .list-menu__item {
  color: #FFFFFF; /* Weiße Farbe für inaktive Links */
  text-decoration: none; /* Entfernt die Unterstreichung */
}

/* Stil für den aktiven Link im Header-Menü */
.header__inline-menu .header__menu-item[aria-current="page"], 
.header__inline-menu .list-menu__item[aria-current="page"] {
  color: #CFC242; /* Goldgelbe Farbe für den aktiven Link */
}

/* Optional: Stil für Hover-Zustand aller Links im Header-Menü */
.header__inline-menu .header__menu-item:hover, 
.header__inline-menu .list-menu__item:hover {
  color: #CFC242; /* Optional: Verändert die Farbe beim Darüberfahren */
}

.header__inline-menu als den übergeordneten Selektor nutzen, um sicherzustellen, dass die Stilregeln nur auf die Links im Header-Navigationsmenü angewendet werden. Für inaktive Links die Farbe auf Weiß (#FFFFFF) setzen und entferne die Unterstreichung. Für den aktiven Link das Attribut [aria-current="page"] zusammen mit den Klassen .header__menu-item und .list-menu__item verwenden, um die goldgelbe Farbe (#CFC242) spezifisch anzuwenden. Das aria-current="page"-Attribut ist ein guter Weg, um den aktuellen, aktiven Link zu kennzeichnen, ohne zusätzliche Klassen hinzufügen zu müssen. Der Hover-Zustand für alle Links im Menü wird optional auf die goldgelbe Farbe gesetzt, um ein konsistentes visuelles Feedback zu bieten.