Alla fine di questa lezione saprai bloccare lo scroll della pagina mentre il nav menu di Webflow è aperto — un fix di UX piccolo ma importante — con una sola riga di CSS e zero JavaScript. È il tipo di soluzione ordinata che fa sembrare un menu mobile finito invece che sciatto.
Il problema è familiare: apri il nav menu su mobile, ma la pagina dietro continua a scrollare, che dà una sensazione trascurata e fa perdere il segno all’utente. Il riflesso solito è tirare fuori uno script. Non serve — Webflow ti dà già tutto ciò che ti occorre.
La chiave è una classe che Webflow aggiunge per te in automatico.
Come funziona
Quando apri un nav menu di Webflow, Webflow aggiunge una combo class w--open al menu button (la sua base class è w-nav-button) e la rimuove quando il menu si chiude. Quella classe che si attiva e disattiva è un segnale di stato perfetto — e il CSS moderno sa leggerlo.
Il selettore :has() fa sì che un parent si dia stile in base a ciò che contiene. Quindi diciamo al body: “ogni volta che contieni un nav button attualmente aperto, nascondi l’overflow”. È tutto il trucco — uno stato che esiste già, letto da un selettore che esiste già:
body:has(.w-nav-button.w--open) {
overflow: hidden;
}Mentre il menu è aperto, il body non può scrollare; nel momento in cui si chiude, w--open sparisce e lo scroll torna. Niente interazioni, niente librerie, niente codice tuo da mantenere.
Una cosa da pianificare è lo scope, che dipende da dove incolli la regola. Mettila nel tuo componente Global Styles o nell’head di una singola pagina (Page Settings) e vale solo per quella pagina. Incollala nel codice head del tab Custom Code in Site Settings e vale ovunque. Poi pubblica e testa sul link live — la classe w--open si attiva sul sito reale.
Come si usa
- Copia la regola —
body:has(.w-nav-button.w--open) { overflow: hidden }. - Scegli lo scope — per una pagina, usa il componente Global Styles o l’head della pagina; per tutto il sito, usa il codice head in Site Settings → Custom Code.
- Incolla e pubblica — aggiungi il CSS nel punto scelto e pubblica il sito.
- Testa sulla pagina live — apri il nav menu e verifica che la pagina non scrolli, poi chiudilo e verifica che lo scroll torni.
Ecco fatto — una regola CSS pulita invece di uno script, e un menu mobile che si comporta esattamente come la gente si aspetta.