Wist je dat meer dan de helft van alle websitebezoekers tegenwoordig een mobiele telefoon gebruikt om informatie te zoeken? het is daarom van cruciaal belang dat de navigatie op je smartphone vlekkeloos werkt en er aantrekkelijk uitziet. hoewel het divi thema van elegant themes ontzettend veel mogelijkheden biedt via de visuele bouwer, loop je soms tegen beperkingen aan wanneer je het mobiele menu net even anders wilt vormgeven. in dit artikel duiken we diep in de wereld van css code om jouw mobiele menu volledig naar je hand te zetten, zodat je bezoekers een optimale gebruikerservaring hebben.

Wat is css en waarom is het essentieel voor je divi website?

voordat we direct in de codes duiken, is het goed om te begrijpen wat css precies is. css staat voor cascading style sheets. je kunt het zien als de stylinglaag van je website. waar de html de structuur bepaalt (zoals koppen, alinea’s en afbeeldingen), zorgt css voor de kleur, het lettertype, de tussenruimtes en de algehele vormgeving. voor eigenaren van een wordpress website is css de sleutel tot maatwerk zonder dat je de kernbestanden van je thema hoeft aan te passen.

binnen het divi ecosysteem kun je veel instellen via de module-instellingen, maar het mobiele menu heeft vaak een eigen willetje. door specifieke css codes toe te voegen, kun je elementen aanpassen die in de standaard instellingen niet zichtbaar zijn. denk hierbij aan de dikte van de lijntjes tussen de menu-items, de kleur van het bekende hamburger-icoontje of zelfs de animatie van het uitklappen. als je meer wilt weten over het bouwen van headers, kun je ook kijken naar onze divi theme builder header gids voor beginners.

Waar voeg je de css code toe in wordpress?

er zijn verschillende plekken waar je css code kunt plaatsen binnen je wordpress omgeving. voor beginners is de meest veilige en makkelijke plek de divi thema opties. volg deze stappen om bij het juiste veld te komen:

• log in op je wordpress dashboard.
• navigeer in het linkermenu naar divi en klik op thema opties.
• scroll op het tabblad algemeen helemaal naar beneden tot je het vak aangepaste css ziet.
• hier kun je alle codes plakken die we in dit artikel bespreken.

een andere methode is het gebruik van de theme customizer, waar je direct live resultaat ziet. mocht je echter tegen problemen aanlopen waarbij wijzigingen niet zichtbaar worden, dan kan dat soms liggen aan een technisch conflict. in zulke gevallen is onze wordpress helpdesk beschikbaar om je te ondersteunen bij complexe aanpassingen.

De belangrijkste css selectors voor het mobiele menu

om een specifiek onderdeel van je website aan te passen, moet je weten hoe dit onderdeel in de code wordt genoemd. dit noemen we een selector. voor het mobiele menu van divi zijn er een paar die je vaak zult gebruiken. het is belangrijk om deze exact over te nemen, inclusief de puntjes of hekjes die ervoor staan.

de meest gebruikte selectors zijn:

• .mobile_menu_bar: dit is de container van het hamburger-icoon.
• .et_mobile_menu: dit is de volledige lijst met menu-items die verschijnt als je op het icoon klikt.
• .et_mobile_menu li a: hiermee spreek je de tekstlinks binnen het menu aan.
• .mobile_nav.opened .mobile_menu_bar:before: hiermee kun je het icoontje aanpassen wanneer het menu geopend is.

Het aanpassen van de achtergrondkleur en tekstkleur

standaard heeft het mobiele menu van divi vaak een witte achtergrond met blauwe of zwarte tekst. als dit niet past bij je huisstijl, kun je dit eenvoudig wijzigen. met de onderstaande code verander je de achtergrondkleur naar een donkere tint en de tekst naar wit.

/ achtergrond van het mobiele menu aanpassen /
.et_mobile_menu {
    background-color: #222222 !important;
}
/ tekstkleur van de menu items aanpassen /
.et_mobile_menu li a {
    color: #ffffff !important;
}

het gebruik van !important zorgt ervoor dat deze code voorrang krijgt boven de standaard instellingen van het thema. dit is een handige truc voor beginners om zeker te weten dat de wijziging wordt doorgevoerd. wees echter voorzichtig met het overmatig gebruik hiervan, omdat het de code later lastiger te beheren maakt.

De hamburger-icoon kleur en grootte wijzigen

het hamburger-icoon is het symbool met de drie streepjes waar mensen op klikken om het menu te openen. soms valt dit icoon weg tegen de achtergrond van je header. met een beetje css kun je dit icoon een opvallende kleur geven of groter maken.

/ kleur en grootte van het hamburger icoon /
.mobile_menu_bar:before {
    color: #e02b20 !important;
    font-size: 35px !important;
}

door de font-size aan te passen, maak je het icoon makkelijker klikbaar voor mensen met grotere vingers, wat de toegankelijkheid van je website direct verbetert. mocht je tijdens het aanpassen van je website ineens een vreemd technisch probleem ervaren, zoals een haperende editor, lees dan onze tips over het oplossen van een wit scherm in divi.

De scheidingslijnen tussen menu-items verwijderen of stylen

divi plaatst standaard dunne grijze lijntjes tussen elk menu-item in de mobiele weergave. sommige ontwerpers vinden dit rommelig staan en willen een strakker uiterlijk. je kunt deze lijntjes volledig verwijderen met de volgende code:

/ scheidingslijnen verwijderen /
.et_mobile_menu li {
    border-bottom: none !important;
}

wil je juist dat de lijntjes duidelijker zichtbaar zijn? dan kun je de dikte en de kleur aanpassen door none te vervangen door bijvoorbeeld 2px solid #cccccc. dit geeft je menu een gestructureerde en professionele uitstraling die past bij een zakelijke website.

Het menu centreren voor een moderne look

standaard lijnt divi de tekst in het mobiele menu links uit. voor een moderne en gebalanceerde look kiezen veel bedrijven ervoor om de menu-items te centreren. dit geeft een rustiger beeld op een smal telefoonscherm.

/ menu items centreren /
.et_mobile_menu li a {
    text-align: center !important;
}

vergeet niet dat css altijd direct effect heeft. als je de code opslaat en je website ververst op je telefoon, zie je meteen het resultaat. het is aan te raden om dit altijd te testen in een incognito venster van je browser om te voorkomen dat je naar een oude versie van je site kijkt die nog in het geheugen (de cache) staat.

Geavanceerde tip: media queries gebruiken

soms wil je dat een bepaalde styling alleen geldt voor telefoons en niet voor tablets. hiervoor gebruiken we media queries. dit zijn regels in css die zeggen: pas deze code alleen toe als het scherm smaller is dan een bepaald aantal pixels.

/ alleen toepassen op schermen kleiner dan 767px /
@media only screen and (max-width: 767px) {
    .et_mobile_menu {
        background-color: #ff0000 !important; / felrood voor mobiel /
    }
}

door media queries te gebruiken, behoud je de volledige controle over hoe je website reageert op verschillende apparaten. dit is een essentieel onderdeel van responsive webdesign, waarbij de website zich aanpast aan de gebruiker in plaats van andersom.

Conclusie over het aanpassen van je divi menu

het aanpassen van je divi mobiele menu met css code lijkt in het begin misschien spannend, maar het biedt je de ultieme vrijheid om een unieke website te creëren. door gebruik te maken van de juiste selectors en eenvoudige eigenschappen zoals kleur, tekstuitlijning en borders, transformeer je een standaard menu tot een professioneel onderdeel van je merkidentiteit.

onthoud dat kleine aanpassingen vaak het grootste effect hebben op de gebruiksvriendelijkheid. begin met simpele wijzigingen en breid je kennis van css langzaam uit. mocht je er zelf niet uitkomen of heb je hulp nodig bij een groter project, dan staan de experts van prospects4u altijd klaar om je te ondersteunen bij het optimaliseren van je wordpress website.