Einzelne Menüpunkte stylen mit CSS
Wenn ihr einzelne Menüpunkte in einem WordPress Menü umgestalten wollt, bedarf es dazu nicht immer eines Plug-Ins. Mit ein wenig CSS und HTML könnt ihr das auch sehr gut selbst bewerkstelligen.
Geht dazu zu Design -> Menüs.
Am oberen rechten Bildschirmrand könnt ihr auf Ansicht anpassen klicken. Wählt die Checkbox CSS-Klassen an.
Am oberen rechten Bildschirmrand könnt ihr auf Ansicht anpassen klicken. Wählt die Checkbox CSS-Klassen an.
Im Menüpunkt selbst könnt ihr dem Menüpunkt jetzt eine CSS-Klasse zuweisen. In der Namensgebung seid ihr frei. Es sollte natürlich nicht eine Bezeichnung wie theme oder nav sein. Die gefahr, dass es diese Klasse bereits gibt ist sehr hoch. Ich habe meine CSS Klasse mpunkt-nav genannt.
Nachdem ihr die CSS Klasse vergeben habt, könnt ihr anhand dieser Klasse erste Änderungen vornehmen.
Hintergrund
Fangen wir mit dem Hintergrund an. Geht dazu in den Customizer und wählt zusatzliches CSS aus.
Fügt dort folgendes CSS hinzu. Ich habe als Farbe ein Blau gewählt. HEX Codes findet ihr hier: https://www.farb-tabelle.de/de/farbtabelle.htm
.shop-nav {
background: #00BFFF;
}
Ihr müsst natürlich nicht mit HEX Codes arbeiten. Ihr könnt die Farbnamen auch eingeben.
.shop-nav {
background: blue;
}Exkurs
Die vergebene CSS Klasse findet ihr auch im Inspector / Developer Tools (F12 Taste).
Rahmen
Der Rahmen lässt sich wie folgt abrunden. Zum Beispiel um 20px: border-radius: 20px;
.mpunkt-nav {
background: #00BFFF;
border-radius: 20px;
}
Linkfarbe
Die Textfarbe (in diesem Fall, weil es ein Menüpunkt ist, die Linkfarbe) ändert ihr folgendermaßen. Ich habe mich für weiß entschieden.
.mpunkt-nav a {
color: #ffffff !important;
}
Hier ist es wichtig !important zu verwenden, da höher stehende CSS Styles unsere Linkfarbe überschreiben würden und die Linkfarbe schwarz bleiben würde.
Schriftgröße
Die Schriftgröße passt ihr zum Beipiel mit font-size: 30px !important; an. Das sieht dann so aus:
.mpunkt-nav a {
color: #ffffff !important;
font-size: 30px !important;
}
Hover
Ihr könnt den Menüpunkt fürs Hovern (mit dem Mauszeiger über den Menüpunkt fahren) fit machen.
.mpunkt-nav a:hover {
background: #000000;
color: #ff0000 !important;
border-radius: 20px;
}
Fancy Kram
Es geht noch viel mehr. Daher noch ein letztes Beispiel. Zum Beispiel ein Fabverlauf. Eine gute Quelle um Verläufe zu erstellen und um gleich das richtige CSS zu erhalten ist diese hier: https://cssgradient.io/
.mpunkt-nav {
background: rgb(63,94,251);
background: linear-gradient(90deg, rgba(63,94,251,1) 0%, rgba(144,17,130,1) 90%);
border-radius: 20px;
}
Abschließend
Ihr benötigt nicht für alles Plug-Ins, die euer System verlangsamen und mit Code vollmüllen. Vielen Stylingproblemen kann man auch mit CSS begegnen und auch wenn es nicht immer die komfortabelste und 2-Sekunden Lösung ist; ist es dennoch oft die smarteste Lösung.