Samenvatting
Wil je dat je website er ook goed uitziet op een telefoon of tablet? Dan is het handig om een mobiel menu in te stellen. Dat is het bekende hamburgermenu — drie streepjes die je bezoekers kunnen aanklikken om het menu te openen. In dit artikel leer je hoe je instelt wanneer dat menu verschijnt en hoe je je navigatie aanpast per apparaat.
Hoe werkt het
Waar vind je deze instelling?
Open de editor van je website. Klik op het navigatieblok (het blok waarin je menu staat) en selecteer vervolgens het menu-element. In het paneel aan de rechterkant klik je op het tabblad Instellingen. Daar vind je de opties voor je mobiele menu.
Het hamburgermenu instellen
Bij de instelling Hamburger t/m schermgrootte kies je tot en met welk schermformaat het hamburgermenu wordt getoond. Kies je bijvoorbeeld "Tablet", dan zien bezoekers op een tablet, liggende telefoon en staande telefoon het hamburgermenu in plaats van het volledige menu.
Dit zijn de opties:
| Optie | Wat gebeurt er? |
|---|---|
| Desktop | Hamburgermenu op álle schermen (t/m desktop) |
| Laptop | Hamburgermenu op laptop (1024–1279 px) en kleiner; op desktop het volledige menu |
| Tablet | Hamburgermenu op tablet (768–1023 px) en kleiner |
| Telefoon liggend | Hamburgermenu op liggende telefoon (480–767 px) en kleiner |
| Telefoon staand | Hamburgermenu alleen op staande telefoon (< 480 px) |
| Geen | Geen hamburgermenu — altijd het volledige menu |
Het uitgeklapte mobiele menu opmaken
Het mobiele (uitgeklapte) menu heeft een eigen opmaak, die je apart instelt:
- Zet de editor bovenaan in het midden op de smartphone-weergave (telefoon staand) via de deviceswitch.
- Klik twee keer op het hamburgermenu: zo klapt het mobiele menu open én selecteer je het, zodat je de onderdelen kunt opmaken.
- Selecteer de onderdelen van het uitgeklapte menu (achtergrond, menu-items, knoppen) en pas de opmaak aan in het rechter paneel.
- Controleer het resultaat in de smartphone-weergave.
Tip: het mobiele menu wordt vaak vergeten. Loop je website in de smartphone-weergave door om te controleren of het menu ook op mobiel netjes oogt.
Andere navigatie-instellingen
In hetzelfde paneel vind je nog een paar handige opties:
| Instelling | Wat doet het? |
|---|---|
| Onepagermenu | Zet dit aan als je website uit één lange pagina bestaat met ankerlinks (links die naar een plek op dezelfde pagina springen) |
| Startpunt | Hiermee bepaal je vanaf welk niveau je menu begint. Standaard is dat niveau 1 (je hoofdpagina's), maar je kunt ook kiezen voor niveau 2 of 3 als je alleen submenu's wilt tonen |
| Niveaus | Hoeveel menulagen er zichtbaar zijn. Kies 1 voor alleen hoofdpagina's, 2 voor ook subpagina's, of 3 voor drie lagen diep |
Elementen verbergen op bepaalde apparaten
Soms wil je dat een bepaald onderdeel alleen op grote schermen zichtbaar is — bijvoorbeeld een brede navigatiebalk die op een telefoon niet past. Dat regel je via het rechter paneel → tabblad Instellingen → sectie Verbergen. Daar kies je per apparaat (Desktop, Laptop, Tablet, Telefoon liggend, Telefoon staand) of het element zichtbaar is of niet.
Opmaak aanpassen per apparaat
Bovenaan de editor zie je pictogrammen van verschillende apparaten (desktop, laptop, tablet, telefoon). Als je op een apparaat klikt, pas je de opmaak specifiek voor dat schermformaat aan. Standaard gelden je stijlwijzigingen voor alle apparaten, maar zo kun je het finetunen per schermgrootte.
Wanneer gebruik je dit?
- Je wilt bepalen op welke apparaten het hamburgermenu verschijnt
- Je wilt dat je website er op telefoons en tablets netjes uitziet
- Je wilt bepaalde onderdelen verbergen op kleinere schermen