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.