Hey @mrserious
Du kommst ja richtig voran mit dem Coden in deinem Theme! Hast du HTML/Liquid/CSS Coding Erfahrung oder es selber gelernt?
Und ohne einen Beispiel zu sehen (nur deinen Screenshot) kann ich verstehen was du machen möchtest. Praktisch den ganzen Header Schwarz mit weissen Menüpunkten.
Und diese sollen nicht unterstrichen werden beim Mouse-over. Dann werden sie beim Hover-away dunkelgrau. Somit müssen wir wissen, was du in die CSS Classes eingecodet hast. Das kannst du beispielsweise sehen wenn du einen Rechtsklick auf einen betroffenen Menüpunkt machst -> "Inspect" -> und in der Chrome Dev Console auf "copy element" klickst und den gesamten Code hier einfügst. Oder eben mir einen befristeten Vorschaulink zu einem Beispiel hier gibst so dass ich das analysieren kann.
Barrierefreiheiten und die UX dessen was du vor hast
Wenn die Menüpunkte ganz weiss bleiben und keine Unterstriche haben, dann kann es die Navigation Experience vieler Besucher zu deinem Shop verschlechtern und damit kannst du viele potentielle Conversions verlieren. Der größte Conversion Killer ist jegliche Kundenverwirrung.
Was du probieren kannst
Wenn du es selber im Header programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Es klingt so, als ob es einige CSS-Überlagerungen gibt, die das gewünschte Verhalten beeinflussen. Um die genannten Probleme zu lösen, schlage ich die folgenden Änderungen im CSS-Code deines Shopify Dawn-Themes vor.
Für das graue Hervorheben der Menüpunkte gibt es wahrscheinlich eine CSS-Regel, die die :hover-Pseudoklasse für Menülinks verwendet. Du müsstest sie, wie gesagt, in der Console finden und entsprechend ändern. Suche im CSS nach einer Regel, die in etwa so aussieht:
.nav-link:hover {
color: [irgendeine Farbe];
}
Und ändere sie in:
.nav-link:hover {
color: #FFFFFF; /* Dies stellt sicher, dass der Text weiß bleibt, wenn die Maus darüber schwebt. */
}
Um die Unterstriche bei mouse-over zu entfernen, musst du den border-bottom oder den text-decoration-Wert für die :hover-Pseudoklasse finden und auf none setzen.
Suche nach einer Regel, die in etwa so aussieht:
.nav-link:hover {
border-bottom: [irgendein Wert];
}
Oder:
.nav-link:hover {
text-decoration: underline;
}
Ändere sie dann entsprechend in:
.nav-link:hover {
border-bottom: none;
}
Oder:
.nav-link:hover {
text-decoration: none;
}
Wenn du damit nicht vorankommst dann poste deine Frage in unserem Experten Design Forum hier wo eine Experte dir weiterhelfen kann!
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
