Rendere un mega menu Webflow pienamente responsive

Alla fine di questa lezione i tre mega menu desktop della Parte 3 funzionano in modo pulito su ogni breakpoint — tablet, landscape e portrait — layout, scroll e stati hover inclusi. È l’episodio più insidioso della serie, quindi lo affrontiamo un breakpoint alla volta e restiamo metodici.

Il tema è che un mega menu si comporta in modo completamente diverso su mobile: invece di fluttuare sotto la navbar, vive dentro il menu mobile aperto. Capire questo singolo cambiamento spiega quasi ogni fix qui — perché i pannelli spariscono, perché devono scrollare e perché le colonne devono ridursi.

Come funziona

Il ribaltamento del posizionamento. Su desktop, ogni dropdown list è position: absolute con top: 100% così il pannello fluttua sotto la navbar. Su mobile il nav menu stesso diventa position: absolute (fissato sotto la navbar), il che lo rende il nuovo punto di riferimento — quindi il vecchio top: 100% spinge ogni pannello sotto il menu a tutta altezza e fuori schermo. La soluzione è riportare le dropdown list a position: static: ora ogni pannello sta inline, proprio sotto il suo toggle, esattamente dove dovrebbe stare un accordion mobile.

Rendilo scrollabile. Un mega menu aperto può facilmente essere più alto del viewport, e di default l’overflow è semplicemente nascosto — intrappolando il contenuto. Dai all’inner wrapper del nav menu overflow: auto e tutto il menu scrolla quando serve.

Riduci le colonne con calc(). Invece di passare il container a una griglia, tieni i cambiamenti sui figli: imposta ogni colonna su shrink if needed e una larghezza di calc(50% - gap/2) per due colonne (o 100% per una su portrait). Il - gap/2 conta — senza tenere conto del gap flex, due colonne “50%” non ci stanno su una riga.

Attenzione alle classi condivise. Pulsanti e banner riusano la classe base del link normale. Quindi quando passi i link a direzione colonna, si spostano anche le frecce dei pulsanti. Il fix affidabile è rimuovere temporaneamente la combo class di sfondo del pulsante, correggere la direzione sulla classe condivisa, poi riapplicare la variante. La stessa idea di eredità condivisa lavora a tuo favore alla fine: sistemare gli stati hover una volta sulle classi base scende a cascata su landscape e portrait in automatico.

Come si usa

1. Tablet — riposiziona. Imposta il nav menu su position: absolute, top: 100% (sta sotto la navbar). Riporta ogni navbar_dropdown-list a position: static così i pannelli appaiono inline. Dai all’inner wrapper del nav menu overflow: auto per scrollare.
2. Tablet — riduci a due colonne. Sulle colonne, imposta shrink if needed e larghezza calc(50% - <metàGap>). Uniforma il padding del pannello, togli i bordi destri delle colonne e passa il content wrapper dei link in fondo da row a column.
3. Tablet — ritocchi per menu. Per Solutions, azzera il max-width cc-small e usa order: last sulla colonna stretta così il banner bilancia il layout. Resources non richiede nulla.
4. Landscape — snellisci. Togli il padding sopra/sotto del pannello e i box-shadow, stringi il padding per coincidere col toggle e impila i pulsanti CTA a tutta larghezza (inner CTA list row → column) — poi sistema la freccia con il trucco del toggle della combo class. Dai alla colonna banner una combo cc-landscape impostata a tutta larghezza.
5. Portrait — una colonna. Azzera il padding sinistro di default del brand link, uniforma il padding del toggle, imposta le colonne su width: 100%, riporta i link a row (icona accanto al titolo) e sistema il gap dei pulsanti.
6. Rimuovi l’hover. Nei dropdown, riporta il colore hover dei link a scuro e imposta l’hover di pulsanti/banner su bianco con opacità di nuovo al 100% (fai il toggle della combo del singolo pulsante per editare lo stile condiviso). L’eredità porta questi fix giù su landscape e portrait.

Questo completa una navbar e un mega menu robusti e pienamente responsive che rispecchiano quelli di Webflow — struttura, accessibilità, spacing fluido e comportamento mobile tutti gestiti.