WPLounge
Home » Tutorials » WordPress menu-item andere kleur geven

WordPress menu-item andere kleur geven

Wil jij 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.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

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. Gelukkig is dat zo gedaan!

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »
Lees meer over Divi.

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 WordPress, en open het menu waarin het menu-item zich bevindt.

Scherminstellingen WordPressKlik 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).

CSS Classes WordPress
Vink “CSS classes” aan in de Scherminstellingen.

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:

WordPress menu item aanpassen
WordPress menu item aanpassen

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:

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

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

Achtergrond- en tekstkleur aanpassen

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:

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:
Wouter Postma

Wouter Postma

Eigenaar van WPLounge. Blogt ook in het Engels op WPLounge.org.

Gratis op de hoogte blijven?

Meld je gratis aan voor onze nieuwsbrief om op de hoogte
te blijven over ontwikkelingen in WordPress!

12 reacties

  • Alleen, slik, helaas, wat ik ook probeer, ook ik krijg het ook niet aan de praat in theme 20-12 en ook niet in theme 20-15. Het heeft me inmiddels een paar uren gekost. Doe ik het fout of klopt de beschrijving niet?

  • Helaas werkt de achtergrondkleur wel maar ik wil alleen de tekstkleur veranderen, dit werkt helaas niet.. Enig idee waar dit aan ligt?

  • Heb met succes fontgrootte veranderd. Zou graag bij mouse over (hover) de kleur van menu-item laten veranderen. Wat nu grijzig-wit wordt, veranderen in geel.
    Welke code voeg ik dan toe aan de speciaal class? Behalve dat ik weet dat geel #ffff00 is?

  • Ik krijg de achtergrondkleur wel veranderd, maar de kleur van het lettertype niet. Ik heb ook de code met ‘important’ geprobeerd. Helaas lukte het ook daarmee niet. Wie heeft er nog meer tips?

  • Beste,
    Ik ben al paar dagen bezig met zoeken om de achtergrond kleur van mijn home pagina van kleur te veranderen. Deze is nu gewoon wit.Ik werk met wordpress met het thema twenty thirteen. Ik heb al animatie kunnen toevoegen en mijn footer kunnen veranderen. Maar wil graag de achtergrond kleur kunnen veranderen of in een afbeelding kunnen veranderen. Ik open mijn stylle.css via – wordpress – wp-content – themes – twentythrtteen en open deze dan in notepas++ maar ik zie nergens niet waar ik het kan aanpassen. Ik heb in het menu het woord achtegrondkleur gebruikt ( waat jij het woord speciaal heb genruikt). ik werk wel momenteel offline, omdat wil eerst de site volledig klaar hebben. Werk ook met xampp.
    Wat moet ik doen aub.
    Mvg,
    Ronny

  • Hoi,

    Bedankt voor de tips in het artikel! Bij mij lukt ook het veranderen van de letterkleur ook niet met de code important. De andere lukte overigens wel! Suggesties?

    Bedankt ,

    Gr Linda

  • Bij mij werken alle opties helaas niet, ook niet met important. Het gaat bij mij wel om een subitem, geen hoofditem. Ik weet niet of dat verschil uit maakt?

    Enig idee of er nog een andere manier is om de vormgeving van het subitem aan te passen?

  • hoi!
    ik zou graag de achtergrond van mijn blogartikelen veranderen, maar ik vind nergens CCS classes….
    Kan iemand me helpen?
    Bedankt!

Advertenties

Blijf op de hoogte!