Menu kleur aanpassen in WordPress

Wil jij je menu kleur aanpassen in WordPress? Zo kun je een bepaalde knop in je WordPress-menu een andere kleur geven of extra laten opvallen? Dit is mogelijk door dit specifieke menu-item een CSS class mee te geven en deze toe te voegen aan je stylesheet.

In dit artikel lees je stap voor stap hoe je een menu-item van een speciale kleur voorziet.

Gebruik je voor je navigatie nog geen WordPress-menu? Dan moet je die eerst even aanmaken. Zodra je een menu hebt aangemaakt kun je beginnen.

CSS classes weergeven in menu-instellingen

Allereerst zorgen we dat de CSS class kan worden toegevoegd aan je menu-item. Ga naar Weergave > Menu’s in het WordPress dashboard, en open het menu waarin het menu-item zich bevindt.

Klik vervolgens rechtsboven in het scherm op Scherminstellingen. Er ontvouwt zich nu een menu, waarin je meerdere zaken kunt aanvinken.

Vink in het scherminstellingen-menu het vakje CSS classes aan (zie ook onderstaande afbeelding).

Dit zorgt ervoor dat er een nieuw veld bij ieder menu-item komt te staan waarin je een CSS class kunt toevoegen. Als je dit veld leeg laat, zal het menu-item blijven zoals het is.

CSS class toevoegen aan menu-item

Nu we het CSS Classes-veld zichtbaar hebben gemaakt, kunnen we een class gaan toevoegen aan het menu-item dat we willen uitlichten. Klap het menu-item open, en je krijgt het volgende te zien:

Zoals je ziet heb ik in het CSS Class-veld “speciaal” ingevuld. De CSS-class van dit menu-item heeft nu de naam “speciaal”.

CSS class toevoegen aan stylesheet

Uiteraard begrijpt je website nu nog niet wat je met “speciaal” bedoelt. Om te zorgen dat de class ook daadwerkelijk iets doet, moeten we deze ook in de CSS stylesheet gaan toevoegen.

Om je stylesheet te bewerken, ga je naar Weergave > Bewerker of open je het style.css-bestand van je thema via DirectAdmin of FTP.

In je style.css-bestand voeg je het volgende stuk code toe:

.speciaal {
    background-color: #ed1dfa;
}

Dit zorgt ervoor dat de achtergrondkleur van je menu-item de kleur #ed1dfa krijgt (deze kleur). Uiteraard kun je ook voor een andere kleur kiezen, en waarschijnlijk wil je dit ook.

Om dit te doen, moet je de kleurcode achterhalen. Ik doe dit meestal in Photoshop, maar het kan ook online, via bijvoorbeeld ColorPicker.com. Deze zes tekens zet je op de plek waar nu de code ed1dfa staat.

Er is nog veel meer mogelijk met CSS classes, zo kun je bijvoorbeeld de tekstkleur aanpassen, of de tekst groter of kleiner maken.

Meer mogelijkheden om je menu kleur aan te passen in WordPress

Een aantal voorbeelden van andere mogelijkheden voor je menu-item.

Achtergrond- en tekstkleur aanpassen

.speciaal {
    background-color: #ed1dfa;
    color: #ffffff;
}

Bovenstaande code past de achtergrondkleur aan (net als in het voorbeeld hierboven), en maakt de tekstkleur wit (#FFFFFF). Ook deze kleuren kun je weer aanpassen zoals je zelf wilt.

Tekstgrootte aanpassen

Uiteraard kun je ook de grootte van je tekst aanpassen. Dit doe je met de volgende code:

.speciaal {
    font-size: 12px;
}

Speel een beetje met de grootte (in dit voorbeeld 12px) en kies de grootte die jij goed vindt. Uiteraard kun je ook de grootte veranderen én een achtergrondkleur kiezen én de tekstkleur veranderen. In dat geval wordt de code als volgt:

.speciaal {
    background-color: #ed1dfa;
    color: #ffffff;
    font-size: 12px;
}

Meestgestelde vragen samengevat

🗺

Hoe kan ik mijn WordPress menu-item een andere kleur geven?

Dit kan door het specifieke menu-item een CSS class mee te geven en deze toe te voegen aan de stylesheet. In het artikel leggen we uit hoe we dit doen.

🖥

Hoe kun je CSS classes weergeven in menu-instellingen?

Menu’s’ kun je het menu openen waarin het menu-item zich bevindt. Via ‘Scherminstellingen’ kun je het vakje ‘CSS classes’ aanvinken.

💿

Wat kun je nog meer met menu-items?

Je kan de achtergrond- en tekstkleur en de tekstgrootte aanpassen.