Wanneer je een WordPress menu aanmaakt wil je wellicht dat bepaalde menu items alleen op mobiel getoond worden. Vaak zie je op desktop een menu met daarnaast een aantal knoppen en is daar op mobiel geen ruimte voor. In dit geval filter je de knoppen weg en zet je die linkjes in je mobiele menu. Maar wat als je hetzelfde menu voor desktop en mobiel wil instellen en tóch verschillende items wil tonen? Dan schrijf je een stukje css code!
Verzin eerst een naam voor je css class. In dit voorbeeld heb ik de class ‘mobile-menu-link’ genoemd.
CSS class toevoegen aan je menu item
Ga in de backend van je WordPress website naar Weergave > Menu’s en selecteer het menu waar je de css class aan toe wil voegen. Standaard zie je de optie om een css class toe te voegen niet. Ga dus eerst bovenin je scherm naar Schermopties en zorg dat CSS-Classes aangevinkt staat. Je zult nu zien dat deze optie bij al je menu items is toegevoegd.
Klap het menu item open, voeg de css class toe en sla je menu op.
CSS code toevoegen aan je stylesheet
Ga naar Weergave > Customizer > Custom CSS en voeg onderstaande code toe aan je stylesheet.
/* ---> Menu Hide element on Desktop */
@media only screen and (min-width: 767px) {
.mobile-menu-link {
display: none !important;
}
}
/* ---> END Menu */In dit geval heb ik ervoor gezorgd dat de items met de css class ‘mobile-menu-link’ alleen getoond worden op schermen kleinder dan 767px. Dit getal kun je uiteraard zelf aanpassen.
