Hoe fijn zou het zijn om een mega menu te hebben die alleen met CSS gemaakt hoeft te worden? Heel fijn en ik ga in een aantal stappen laten zien hoe dat gaat.
Stap 1: maak een header template aan
Ga ik het Dashboard naar: templates > theme builder > nieuwe toevoegen > header > en benoem de header. In dit geval noem ik de header het mega menu.
Stap 2: ontwerp de header
Sectie
- Lay-out:
- Breedte inhoud: volledige breedte
- Tussenruimte kolommen: geen tussenruimte
- Hoogte: standaard
- Verticale uitlijning: midden
- Geavanceerd:
- Z-index: 99
- Custom CSS: klik hier
Let op: de CSS die je moet aanpassen om het ventster goed te laten zien is de volgende:
- .menu_content{
- .nav_item{
.menu_content{ moet je net onder de rand van je menu zien te krijgen. Voor mijn header is dat 75px.
Kolom
Plaats een kolom in de sectie.
- Lay-out:
- HTML tag: nav
Elementen
Alle elementen:
- Geavanceerd:
- Positionering: inline
Elementen die gebruikt worden voor het mega menu ventster:
- Layout:
- HTML tag: div
- Geavanceerd:
- Z-index: 11
- CSS-classes: nav_item
- Responsive: op mobiel verbergen
Inner sectie (mega ventster)
Maak vervolgens een inner sectie die je wil gebruiken als ventster in het mega menu. Stel deze als volgt in:
- Stijl:
- Achtergrond: F3F3F3
- Geavanceerd:
- CSS-classes: menu_content
- Z-index: 9
