Menüpunkt im Dropdown färben

Deutsch Diskussion Technische Fragen & Antworten
1

Guten Tag,

wir würden gerne den Namen “SALE” in unserem Kategoriebaum bzw. im Menüpunkt färben.

Wir haben schon ein wenig herum probiert, sind leider aber noch nicht zur Lösung gekommen.

Der Name “SALE” sollte in einer roten Schriftart dargestellt werden.

Wir verwenden das Dawn Theme.

Vielen Dank vorab für eure Hilfe.

Mit freundlichen Grüßen

Dropdown.png

2

Hey @Jamega-Gmbh

Ein roter Sale Menüpunkt ist eine tolle Sache um den Besucher direkt in die Angebote zu verlocken denn man schaut ja bekanntermaßen zuerst auf die Navigation sobald man auf der Landingpage landed.

Das habe ich jetzt in meinem Dawn Theme getestet und da in deinem Bild es sich um den letzten Top-Level Menüpunkt handelt, verwenden wir das last_child Attribut des letzten Listenelements (li) :

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

Um beispielsweise dieses letzte Menüelement zusätzlich fett zu machen, kann man die CSS-Eigenschaft font-weight verwenden. Der aktualisierte CSS-Code könnte wie folgt aussehen:

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

Durch Hinzufügen von font-weight: bold !important; wird der Text des Links fett dargestellt. Auch hier sorgt die !important Anweisung dafür, dass dieser Stil Vorrang vor anderen Stilregeln erhält - diese muss man aber nicht unbedingt verwenden. Man verwendet sie nur um sicherzustellen, dass diese Stilregel Vorrang vor anderen potenziellen Stilregeln hat, die möglicherweise auf das gleiche Element angewendet werden und dem entgegenwirken könnten.

image.png
image.png3330×2098 463 KB

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas 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.

3

Hallo Gabe,

vielen Dank für deine Info. Das hat soweit auch alles funktioniert und das “SALE” ist jetzt fett und rot geschrieben, leider ist jetzt auch immer der letzte Menüpunkt im Dropdown Rot.

Gibt es hier noch eine Möglichkeit das wirklich nur das “SALE” Rot ist.

Vielen Dank!

MFG

JamegaGmbh_0-1712819674027.png
JamegaGmbh_0-1712819674027.png1285×318 181 KB

4

Hey @Jamega-Gmbh

Das ist ein super Beispiel dass CSS, vor allem in der Navi, nicht so einwandfrei ist. Ich wusste ja auch von deinem ursprünglichen Bild ganz oben nicht, dass das Sale Menu item dropdowns haben würde. Somit hat das lower-level Item auch die Eigenschaft li:last-child a; des top-level item angenommen.

Das beste bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Dann :eye: wir weiter! :wink:

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

5

Hallo @Gabe ,

danke für deine Nachricht. Tatsächlich ist der Punkt “SALES” der einzige mit “Home” welche kein Drop Down Menü haben, allerdings in den Kategorien welche ein Drop Down haben ist der letzte Punkt nun auch Rot.

Gerne stelle ich dir einmal einen Link zur Verfügung: https://ikcpofzqidu59s9d-84378911069.shopifypreview.com

Vielen Dank!

6

@Jamega-Gmbh

Ah danke für Link und, ja, ich sehe was du meinst!

Um das Problem zu lösen, dass nur das Top-Level-Element “SALE” und nicht die letzten Elemente in jedem Dropdown-Menü rot gefärbt werden, müssen wir den CSS-Selektor so anpassen, dass er spezifisch genug ist, um nur das gewünschte Element zu treffen und dabei alle anderen Elemente unberührt zu lassen.

Da “SALE” ein Top-Level-Element ohne Untermenü ist und direkt unter dem ul mit der Klasse list-menu--inline liegt, kannst du folgenden CSS-Code verwenden, der genau diese Struktur anspricht:

.list-menu--inline > li:last-child > a {
  color: red !important;
  font-weight: bold !important;
}

Du kannst die !important Anweisung, wie gesagt, wahlweise auslassen - beide Versionen haben jetzt in meinem Dawn Theme gefunzt wie du hier sehen kannst:

11-25-51lz5-nqnhp

Dieser CSS-Selektor zielt auf den letzten li-Tag innerhalb des ul mit der Klasse list-menu--inline, und durch den direkten Kind-Selektor (>) wird sichergestellt, dass es nur die direkten Links (a) innerhalb dieses speziellen li-Elements betrifft und nicht weiter vererbte Links innerhalb eventueller Submenus.

Füge diesen CSS-Code wie oben abgebildet ein und es sollte das “SALE”-Menüelement rot färben, ohne die Farbe der Links in den Dropdown-Menüs zu verändern.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink: