MEGAMENU
Elementor Nav Menu Widget
– Desktop only
– Header template pro tuto stránku: Header – Megamenu
CSS: není
Snippets: nejsou
Vše je v templatu hlavičky.
První sekce má HTML widget se scriptem a základním CSS stylem.
Druhá sekce je normálně zbuilděná hlavička.
Další sekce jsou Megamenu.
Každá megamenu sekce má svoje unikátní ID (#megamenu-1, apod.) a společně mají stejnou classu (.megamenu-all).
Megamenu sekce musejí mít v kartě Responsive: Hide on: Desktop, Tablet, Mobile
- V CSS stylech v HTML widgetu je třeba nastavit u .megamenu-all:before jeho výšku tak, aby se shodovala s výškou hlavičky nebo s mezerou mezi vrškem megamenu a vrchním krajem obrazovky (jinak by se daly položky menu myší objet vrchem a vyvolat tak překrytí už otevřeného megamenu.
- V tom případě pak sekce Megamenu nesmějí mít levý a pravý padding! (protože pak odsazují megamenu-all:before a zobrazí se v prohlížeči horizontální scrollbar.)
- Nejjednodušší je však výšku hlavičky určit Elementořím Vertical paddingem ve stylování menu (pak budou megamenu sekce lícovat a nemusíme používat .megamenu-all:before vůbec).
- Pozor na Z-indexy. Je třeba mít hierarchii: Nav Menu widget úplně nejvýše, megamenu-all a :before pod ním (zde Nav Menu widget: 2000, megamenu-all a jeho :before 1100).
- HTML widget samotný je třeba nemít v nějaké svojí sekci nad hlavičkou páč by se objevovala 1px mezera.
Pozn:
- Fotogalerie níže je jen pro natáhnutí contentu.
