Wie ändere ich sowohl den Hover-Text als auch die Hintergrundfarbe des Header-Menüs?

Entwickler
,
1

Wie ändere ich sowohl den Hover-Text als auch die Hintergrundfarbe des Header-Menüs?
Ich bin kein CSS-Experte.

Der Code und wo ich ihn einfügen kann, wären hilfreich, danke!

@vinothkannans

2

Hallo @rickwatson, hier ist etwas Code, der dir helfen sollte. Du musst die Werte für Farbe/Hintergrundfarbe so anpassen, dass sie deinen Wünschen entsprechen. Wenn du sie im Tab common.css platzierst, sollte das funktionieren.

Hintergrundfarbe des Header-Menüs:

.b-header {
   background-color: var(--tertiary);
}

Links

.b-header .nav-pills li a {
    color: var(--secondary);
}

Links (beim Hovern)

.b-header .nav-pills li a:hover {
    color: #001aff;
    background-color: red;
}

Bezüglich der Werte, die du für die Eigenschaften color und background-color angeben kannst, findest du hier weitere Informationen. Du kannst Hex-Farbcodes, rgba-Werte, hsa-Werte usw. eingeben.

Es wird jedoch empfohlen, wann immer möglich, bestehende CSS-Variablen zu verwenden, damit du Dinge wie die Unterstützung für den Dunkelmodus beibehalten kannst.

Du kannst herausfinden, welche Variablen auf deiner Website existieren und welchen Farben sie entsprechen, indem du die Entwicklertools deines Browsers überprüfst (:link: Zugriff aufrufen).

Sobald sie geöffnet sind, überprüfe im Tab Styles die Deklarationen in color_definitions.scss für den Selektor :root.

example
example814×1394 189 KB

3 „Gefällt mir“
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.