In dit artikel leggen we je uit hoe je de hoofdmenu kan stylen van de website. 
De wijze waarop het menu wordt getoond op de website, worden aangemaakt in het thema. 
 

1. Ga naar de knop Thema die bovenaan de pagina staat.
2. Er opent zich nu een vlak links waar het thema staat. 

Klik op Tonen achter Menu.

Door op Verbergen te klikken, wordt het menu-onderdeel in het Thema ingeklapt.

De volgende instellingen kunnen bij voor het gehele menu wat op elke pagina van je website voorkomt, worden uitgevoerd:

Menu

Onder het uitvouw scherm Menu wordt de plaatsing en de vorm van het menu ingesteld. Standaard staat het menu rechts naast het logo. Het menu is een lint aan items.
 

Je kunt het menu ook boven of onder het logo neerzetten.
Tot slot kun je kiezen voor het Hamburgermenu. Het Hamburgermenu vertoond een compacte weergave van het menu. Op kleine (mobiele) schermen zal het lint menu altijd worden vervangen door het hamburgermenu. Je kan instellen vanaf welke grootte dit moet gebeuren bij de Geavanceerde Instellingen onderaan bij het Thema.
Een hamburgermenu ziet er zo uit en wordt uitgelijnd aan de rechterkant van het scherm:

Menu actief style

Onder het uitklap menu van de actieve stijl stel je in hoe de pagina die voor staat in het menu getoond wordt. Op het hamburgermenu heeft deze functie geen effect.
De pagina die voor staat kun je in het menu op de volgende manieren laten zien:

• Met een standaard achtergrondkleur.
  
  
  Er wordt een blokje om het gekozen menu-item heen geplaatst in de themakleur van de website.
  De button is ongeveer hetzelfde, maar deze is kleiner en heeft afgeronde hoeken
   

• Bold

  
  Het gekozen menu-item wordt vetter gedrukt dan de andere menu-items.
   

• Onderstreept / Omlijnd
  
  Het gekozen menu item wordt onder het woord onderstreept.
  In de bovenstaande afbeelding wordt het gekozen menu item omlijnd.
   

Uitlijning

Met de uitlijning kan worden gekozen of het menulint ten opzichte van het logo link(s), rechts of in het midden moet worden uitgelijnd.

De vormgeving van het menu zal over de gehele website worden toegepast.

Tip: Maak je menu niet te vol. Hoe minder items, hoe beter er door je website heen te navigeren is. Het opzetten van het menu doe je in de pagina-boom. Hoe je dat doet, lees je hier. 

Er zijn drie vinkjes met betrekking tot het menu die aan of uit gezet kunnen worden:

• Bovenaan bij scrollen:
  Het menu blijft altijd boven aan de pagina plakken. Als een bezoeker naar beneden scrolt, zal het menu bovenaan zichtbaar blijven en aanklikbaar zijn.

• Volledige breedte:
  Het menu wordt over de volledige breedte van de website uitgesmeerd. Vooral voor menu's met veel items is dit aan te raden.

• Activeer navigatie naar hoofdpagina's:
  Als dit vinkje is aangestreept, zijn de bovenste pagina's van het menu beschikbaar om aan te klikken. Standaard staat dit vinkje uit en zijn alleen de onderliggende pagina's aanklikbaar.
  Hou er rekening mee dat je ALLE onderliggende pagina's zult moeten vullen als je de navigatie naar de hoofdpagina's aan zet.
  Wil je graag een pagina doorverwijzen naar een andere pagina? Kijk dan in dit artikel. 

Wanneer je de stijl van het menu hebt gewijzigd en op Opslaan klikt (onderaan het Thema) worden de wijzigingen direct op de gehele website doorgevoerd.
Het is niet mogelijk om terug te gaan naar een eerdere setting.
Om de wijzigingen goed te beoordelen, is het raadzaam de website opnieuw te laden.
 

Extra menulaag

Sommige menu's bestaan uit meer dan twee lagen. In de paginaboom maak je dan een pagina aan onder een andere pagina. In het voorbeeld van de paginaboom hieronder is Onze School de laag in het hoofdmenu, Schoolactiviteiten het submenu en in Schoolactiviteiten staat de Introductie.

 

Dit ziet er in het menu als volgt uit:

Standaard staat het 3 laags menu niet aan. In de basis kan het menu uit slechts twee lagen bestaan. 
Wil je een drielaagsmenu? Overweeg dit dan goed, want het komt de navigatie van de website niet altijd ten goede. Zeker op een kleiner scherm wordt de navigatie vaak moeilijker.
Wil je toch een drielaagsmenu? Maak dan via dit klantportaal een melding aan.

Mobiele versie - Hamburgermenu

Wanneer het scherm kleiner wordt, zal in plaats van het lint-menu waarbij de menu items als losse items naast elkaar staan, verspringen naar een blokje waarin streepjes staan. Door op dit blokje te klikken, wordt het gehele menu uitgeklapt over het scherm en kan de bezoeker van de ene naar de andere pagina navigeren.

Je kan instellen bij welke schermgrootte het hamburger mag inspringen.
Dit doe je via Thema > Geavanceerde Tonen en vervolgens bij Width of Mobile Mode:

Hoe kleiner het getal, hoe langer het lint menu in beeld zal blijven.
Klik op Opslaan om je wijziging door te voeren.