it-swarm.com.de

Aktueller Menüpunkt

Ich versuche herauszufinden, warum mein Text nicht so weiß ist, wie er sollte.

Ich überschreibe bootstrap.min.css in style.css die current-menu Klasse in Wordpress, aber kein Erfolg. Die rechte Registerkarte wird hervorgehoben, die Textfarbe ändert sich jedoch nicht.

Kann jemand das Problem erkennen?

.current-menu-item > a{
background-color:#123456;
}
.menu-item:hover > a{
background-color:#123456;
color: white;
}

Ich habe es auch versucht:

.current-menu-item > a{
background-color:#123456;
}

.current-menu-item:hover{
background-color:#123456;
color: white;
}

enter image description here

1
Linards Berzins

Versuchen Sie nur, die Textfarbe beim Schweben zu ändern?

Wenn Sie nur die Textfarbe ändern möchten (nicht NUR beim Hover, sondern nur, wenn sich der Benutzer auf dieser Seite befindet).

/* This targets the current page's menu item */
.current-menu-item > a{
background-color:#123456;
color: white;
}

/* This targets other menu items when you hover over them */
.menu-item:hover > a{
background-color:#123456;
color: white;
}

Wenn Sie mehr Spezifität benötigen, können Sie entweder die Klasse .menu-item hinzufügen oder die Bootstrap-Klasse, die angewendet wird (normalerweise .nav oder .nav-bar).

Also wäre deine erste Regel

.menu-item.current-menu-item > a{
background-color:#123456;
color: white;
}

Dies basiert nur auf dem Bild, ohne dass das eigentliche Markup zu sehen ist. Es ist schwer zu sagen, aber Sie müssen nur das Element mit den in Ihrem Browser integrierten Entwicklungstools untersuchen, und Sie sollten in der Lage sein, leicht zu erkennen, welche Stile mit welcher Spezifität angewendet werden Sie stellen einfach Ihre Richtlinie her, um höher zu sein.

2
aj-adl

Ich vermute, dass Ihr Problem hier Priorität hat, nicht Ihr Code. Ich verstehe, warum Sie keine Änderungen am Bootstrap-Stylesheet vornehmen und diese Änderungen eher zu Ihrem Haupt-Stylesheet hinzufügen möchten.

Das Haupt-Stylesheet wird zuerst geladen, sodass alle Änderungen, die Sie am Bootstrap vornehmen, zuerst über Ihr Haupt-Stylesheet geladen werden.

Ihr Bootstrap-Stylesheet wird nach Ihrem Haupt-Stylesheet geladen. Dies bedeutet, dass alle Änderungen von den Standardstilen im Bootstrap-Stylesheet überschrieben werden. Aus diesem Grund werden Ihre Änderungen nicht angezeigt.

Es gibt zwei Möglichkeiten, um dem entgegenzuwirken: eine, die allen benutzerdefinierten Stilen CSS-Priorität !important hinzufügt (eine Methode, die ich nicht empfehle und die ich nicht gerne verwende), oder ein benutzerdefiniertes Stylesheet erstellt und eine niedrige Priorität festlegt (so etwas wie 999 muss es sein) Geben Sie eine Zahl größer als 10 ein, wenn Sie sie in die Warteschlange stellen (bevorzugte Methode). Erstellen Sie beispielsweise ein benutzerdefiniertes Stylesheet und nennen Sie es custom-style.css.

function enqueue_custom_style() {
    <--- enqueue custom stylesheet --->
 }

add_action( 'wp_enqueue_scripts', 'enqueue_custom_style', 999 );
2
Pieter Goosen