EN IT
Home Chi sono Learn Blog

Navbar Webflow responsive: unità dvh e blocco scroll

Intermedio 46:35 webflowresponsivenavbardvhscroll-lock

Trasforma una navbar desktop Webflow in un menu mobile pienamente responsive — risolvi il bug dell'altezza mobile con le unità dvh, domina il wrap del flex e blocca lo scroll a menu aperto.

Guarda su YouTube

Punti chiave

  • Usa 100dvh, non 100vh, per un menu mobile a tutta altezza: vh ignora le barre indirizzo/navigazione del telefono, quindi parte del menu resta nascosta dietro finché non scrolli.
  • Webflow forza il nav menu aperto a display: block, quindi margin-top: auto non spinge un gruppo in fondo — avvolgi il contenuto in un div interno e sposta lì gli stili flex.
  • I cambi strutturali (aggiungere un wrapper) toccano ogni breakpoint, quindi riporta gli stili di layout sul nuovo elemento e controlla che il desktop non si sia rotto.
  • flex-wrap fa andare a capo solo gli item a cui è permesso restringersi: passa da 'grow if possible' a 'shrink if needed' (o imposta grow espliciti) così i pulsanti scendono su una nuova riga.
  • Bloccare lo scroll dietro un menu aperto sono poche righe di CSS che mettono il body su overflow: hidden mentre il menu è aperto — senza JavaScript.

Capitoli del video

  1. 00:00 Intro
  2. 01:20 Menu button, Flexbox, underline dei link
  3. 08:39 Stato aperto e altezza del nav menu
  4. 14:34 Layout verticale, spacing, allineamento
  5. 21:34 Flex wrap + valori hidden di Webflow
  6. 30:51 Breakpoint landscape e portrait
  7. 34:08 Unità vh e dvh: altezza del nav menu
  8. 39:09 Rimuovere le interazioni all'hover
  9. 41:19 Bloccare lo scroll a menu aperto
  10. 45:17 Outro

Alla fine di questa lezione la navbar desktop statica della Parte 1 diventa un sistema di navigazione pienamente responsive che funziona su tablet, landscape e portrait — menu mobile incluso. Debug del layout strada facendo e approfondimento su unità e quirk che rendono i menu mobile davvero difficili: vh contro dvh, il comportamento dello stato aperto di Webflow e il wrap del flex.

Due problemi valgono da soli l’intera lezione. Il primo è il bug dell’altezza mobile: un menu dimensionato con 100vh viene tagliato dalle barre del browser del telefono. Il secondo è il trucco per “spingere un gruppo in fondo” che misteriosamente smette di funzionare quando il menu si apre. Entrambi hanno soluzioni pulite una volta capito cosa succede davvero.

Chiudiamo con un tocco professionale: poche righe di CSS che bloccano lo scroll della pagina mentre il menu è aperto, così niente si sposta sullo sfondo.

Come funziona

Il bug dell’altezza mobile è il titolo. Vogliamo che il nav menu aperto riempia lo schermo sotto la navbar, quindi l’istinto è calc(100vh - altezzaNavbar). Ma 100vh misura il viewport ignorando la barra indirizzo e la barra di navigazione inferiore del browser mobile, quindi prima di scrollare il fondo del menu resta nascosto dietro. La soluzione è dvh (dynamic viewport height): segue l’area davvero visibile e si aggiorna dal vivo mentre quelle barre appaiono e spariscono. Cambia l’altezza in calc(100dvh - altezzaNavbar) e il menu non viene mai tagliato. (Attenzione ai valori ereditati — se hai duplicato la classe del nav menu su un wrapper interno, resetta l’altezza nel punto giusto.)

Il trucco del gruppo in fondo richiede un workaround. Per fissare il gruppo di pulsanti secondari in fondo al menu, normalmente gli daresti margin-top: auto in una colonna flex. Ma quando il menu è aperto, Webflow forza il nav menu a display: block, quindi non è un vero flex container e l’auto-margin non ha nulla contro cui spingere. La soluzione: avvolgi il contenuto del menu in un div interno, sposta il layout flex (display: flex, direzione, gap, sizing) su quel wrapper e lascia il nav menu esterno solo a tenere la sua dimensione. Poiché aggiungere un wrapper è un cambio strutturale, tocca ogni breakpoint — quindi riporti gli stili e ricontrolli che il desktop sia ancora a posto.

Il wrap del flex ha un tranello. Attivare flex-wrap sembra non fare nulla quando i figli sono impostati su grow if possible, perché preferiscono restringersi piuttosto che scendere a capo. Passali a shrink if needed (o imposta valori flex-grow espliciti) e vanno a capo come previsto — es. due pulsanti su una riga, la CTA su quella dopo.

Il blocco dello scroll è minimo. Poche righe di CSS mettono il body su overflow: hidden mentre il menu è aperto, congelando la pagina dietro. Niente JavaScript. Mettile nel custom code dell’head (così valgono ovunque) o, se la navbar è un componente, in un embed dentro il componente.

Come si usa

  1. Riposiziona il menu button. Dagli una classe e spingilo a destra con margin-left: auto. Duplica il link “contact sales” fuori dal menu, nascondilo su desktop con una combo class cc-mobile e mostralo da tablet in giù.
  2. Sistema lo stato aperto. Il menu button cambia colore quando è aperto; seleziona il suo stato open e imposta lo sfondo trasparente e il colore dell’icona sulla tua variabile scura così coincide con lo stato chiuso.
  3. Dimensiona il menu correttamente. Imposta l’altezza del nav menu su calc(100dvh - <altezzaNavbar>rem) (calcola l’altezza della navbar dal padding + line-height del link). Dagli lo sfondo giusto.
  4. Vai verticale. Imposta il gruppo di link primario come colonna flex verticale, align: stretch così gli item riempiono la larghezza, passa i dropdown a display: block e allinea a sinistra il testo. Sposta la freccia del dropdown a destra con justify-content: space-between; aggiungi padding orizzontale e bordi tra gli item (trasparente sull’ultimo con una combo cc-last).
  5. Gruppo in fondo + il fix del wrapper. Aggiungi un navbar_nav-menu-inner-wrapper attorno al contenuto del menu, sposta gli stili flex su di esso (direzione colonna) e dai al gruppo secondario margin-top: auto per farlo stare in fondo.
  6. Wrap sugli schermi piccoli. In landscape/portrait, attiva flex-wrap sul gruppo pulsanti e imposta i pulsanti su shrink if needed / flex-grow: 1 esplicito così si dispongono in modo pulito su più righe.
  7. Togli l’hover. Rimuovi le transizioni hover, gli underline box-shadow e i cambi di colore aggiunti per il desktop — non c’entrano nel touch.
  8. Blocca lo scroll. Aggiungi lo snippet CSS che mette body { overflow: hidden } mentre il menu è aperto (custom code dell’head o un embed nella navbar), pubblica e testa su un dispositivo reale.

Prossimo episodio: costruire il mega menu desktop vero e proprio.

Risorse

Domande frequenti

Perché il mio menu mobile a tutta altezza viene tagliato dalla barra del browser?
Probabilmente usi 100vh, che misura il viewport senza tenere conto delle barre indirizzo e navigazione del browser mobile. Passa a 100dvh (dynamic viewport height) — segue l'area davvero visibile in tempo reale, così il menu si ridimensiona mentre quelle barre appaiono e spariscono.
Perché margin-top: auto non spinge il gruppo in fondo al nav menu di Webflow?
Quando il menu è aperto, Webflow forza il nav menu a display: block, quindi non è un vero flex container e il trucco dell'auto-margin non ha nulla contro cui spingere. Avvolgi il contenuto del menu in un div interno, sposta il layout flex su quel wrapper e il trucco torna a funzionare.
Come faccio andare a capo i pulsanti della navbar in Webflow?
flex-wrap da solo non manda a capo gli item impostati su 'grow if possible', perché continuano a restringersi per restare su una riga. Cambia il loro sizing flex-child in 'shrink if needed', o imposta un flex-grow esplicito, così c'è un punto in cui scendono alla riga successiva.
Come impedisco alla pagina di scrollare dietro un menu mobile aperto?
Aggiungi una piccola regola CSS che mette il body su overflow: hidden mentre il nav menu è aperto, nel custom code dell'head del sito o in un embed dentro la navbar. Congela la pagina dietro il menu senza JavaScript.

← Torna al corso