WordPress Tutorials
Menu item veranderen van kleur in WordPress
In dit artikel gaan wij je stap voor stap leren hoe je één specifiek menu item een andere kleur kunt geven. Dit kan handig zijn om ervoor te zorgen dat een menu item meer opvalt dan de andere menu items. Binnen WordPress kun je dit op twee verschillende manieren doen.
We kunnen ervoor kiezen om gebruik te maken van een HTML code. Of we maken gebruik van CSS in combinatie met de menu items. In dit artikel gaan we beiden opties laten zien.
We starten met de CSS optie.
Kleur veranderen met CSS
Om een menu item via CSS van kleur te veranderen moeten we een paar stappen ondernemen.
Allereerst moet we de menu item een CSS class meegeven en moeten we een nieuwe CSS class aanmaken in het style.css bestand.
We beginnen met een koppeling van CSS aan het menu item.
- Ga naar Weergave > Menu’s
- Selecteer het hoofdmenu
- Klik rechts boven op Scherminstellingen
- Selecteer CSS
Vervolgens selecteer je het menu item die je van kleur wilt veranderen.
Je ziet bij CSS Class nu menukleur staan. We hebben een nieuwe CSS Class opgegeven voor het menu item WordPress.
We moeten nu een nieuwe CSS class toevoegen aan ons style.css bestand.
[php].menukleur {color: #000000;
}
[/php]
CSS class toevoegen aan style.css
Open je stylesheet bestand door de volgende stappen te volgen.
- Ga naar Weergave > Editor
- Voeg bovenstaande code toe aan je stylesheet
Klik op Bestand opslaan
Als je nu opnieuw terug gaat naar je website zul je zien dat de kleur van je menu item is aangepast.
Menu item kleur aanpassen via HTML
Soms is het gemakkelijker om een menu item toe te voegen met een kleur. Je maakt dan gebruik van een kleine HTML code.
Hieronder zie je een voorbeeld van een menu dat gebruik maakt van HTML codes om bepaalde menu items een andere kleur te geven.
Je ziet de menu items: Workshops (TIP!) & HOW TO
Deze twee items maken gebruik van onderstaande html code:
[php]<font color="#9f5244"> (tip!)</font>[/php]Je plaatst de tekst tussen het HTML element en koppelt het aan een color.
Op deze manier kun je gemakkelijk één specifiek menu item een andere kleur meegeven.
Heb je nog vragen over hoe je een menu item een andere kleur kunt geven? Laat dan hieronder een reactie achter.
Hoi Maarten’
ik ben een leek op het gebied van wordpress. Met behulp van Youtube tutorials bouw ik een website voor onze bridgeclub. https://ontwikkel.boekelsebridgeclub.nl/
Ik heb een astra thema met elementor + mystickymenu geinstalleerd. Ik loop tegen de volgende problemen aan:
1. het hamburger-menu-icoon bij gsm-weergave is te bleek van kleur tegen de witte achtergrond
2. het lukt mij niet html-bestanden te embedden in een pagina. Ik krijg wekelijks een nieuw html bestand aangeleverd dat ik op de site moet publiceren; zie “uitslagen –> slemcompetitie.
Met name item 1 is voor mij urgent.
graag reactie
Hi Ton, bedankt voor je reactie. Leuk om te lezen dat je zelf je website bouwt.
Vraag 1:
[data-section=”section-header-mobile-trigger”] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
width: 40px;
height: 40px;
fill: #000;
background: #b2f6bc;
}
Plaats bovenstaande code in je custom css. Vaak bij Weergave > Customizer > Css extra of Css , is afhankelijk van je thema.
De code maakt de streepjes zwart, en maakt de grootte grote namelijk 40px ipv 20 en de achtergrond kleur van het icon wordt de zelfde als je achtergrond kleur website.
Vraag 2:
Als ik klik op het bestand, werkt de link gewoon in een nieuwe pagina. Dus volgens mij is dat geen probleem meer 🙂
Succes met je site!