Navbar e footer in Webflow: nav sticky, grid + Flexbox

Alla fine di questa lezione avrai una navbar sticky con navigazione ad ancore fluida e un footer costruito da un layout di default di Webflow — la sezione in cui griglia e Flexbox finalmente fanno squadra. Non costruiamo la navbar da zero (c’è un intero corso dedicato, mega menu incluso), ma ne analizziamo la struttura e sistemiamo i concetti che si sbagliano più spesso.

La navbar è un ottimo posto per chiarire qualche malinteso: perché il posizionamento sticky “non funziona” finché non aggiungi un offset, come gli anchor link trovano davvero i loro target e dove Webflow applica in silenzio stili che non hai chiesto. Il footer, invece, è dove vedrai griglia e Flexbox come partner e non come alternative.

C’è anche un tema silenzioso qui: sapere quando non reinventare qualcosa. Un layout di default ti dà l’80% di un footer in un clic, e il tuo compito è solo rimodellare l’ultimo 20%.

Come funziona

La navbar di Webflow è un elemento nativo con una struttura integrata — un container, un brand link, un nav menu con dei link e un menu button nascosto che appare sui breakpoint più piccoli. Per rispecchiare il riferimento, limiti il suo max-width, la centri con margini laterali auto e la rendi sticky. Lo sticky è dove i principianti inciampano: impostare position: sticky da solo non fa nulla. Serve anche un offset dall’alto (un piccolo valore tiene uno stacco dal bordo del viewport). Impostati entrambi, la navbar si attacca e il suo backdrop blur si attiva sopra il contenuto che scorre sotto.

Gli anchor link funzionano tramite gli ID. Cambia il tipo di un nav link da “custom URL” a page section e troverai il menu a tendina delle sezioni vuoto — perché nessuna delle tue sezioni ha ancora un ID. Dai a ogni sezione target un ID (features, team, faq) e ora i link si risolvono e scorrono in modo fluido verso di esse. In più, Webflow applica uno stato current al link la cui sezione è in vista; puoi ridargli stile (un colore più vivo) o rimuoverlo, ma è un feedback di navigazione gratis.

Il footer mette in mostra la composizione. Invece di costruire da zero, trascini un layout “dark footer” di default e lo rimodelli. La vera lezione è il layout stesso: il contenuto del footer è una griglia (due righe, due colonne), e al suo interno stanno gruppi Flexbox — colonne di link, un blocco brand, i link legali. La griglia gestisce la disposizione bidimensionale; Flexbox gestisce ogni gruppo monodirezionale. Annidarli è il modo di costruire layout piuttosto complessi senza perdere il controllo — e piccoli tocchi come justify-content sulle colonne a larghezza auto stringono tutto.

Come si usa

1. Ispeziona la navbar. Aggiungi l’elemento navbar nativo. Nota la struttura: navbar → container → un content wrapper (impostato su display: flex, space-between, centrato) che contiene il brand link, il nav menu con i nav-link, un pulsante e il menu button.
2. Rendila sticky. Seleziona la navbar, imposta un max-width (900px) con margini laterali auto, position: sticky e un offset dall’alto (12px). Scorri per confermare che si attacca e che il backdrop blur si attiva.
3. Collega gli anchor link. Dai alle sezioni features, team e FAQ un ID nelle loro impostazioni. Poi imposta il tipo di ogni nav link su page section e scegli la sezione corrispondente. Testa in preview.
4. Dai stile allo stato current. Seleziona un nav link, scegli lo stato current nel selettore di stile e imposta un colore distinto (un viola vivo) così la sezione attiva è evidente.
5. Inserisci un footer. Apri il pannello Add → scheda Layouts → starter library, e clicca un footer scuro. Imposta il suo sfondo, sistema il colore dell’hover dei link (sovrascrivi il default scuro con bianco per l’accessibilità) e cancella le parti che non ti servono.
6. Aggiungi i pezzi mancanti. Avvolgi il brand in un div con un paragrafo tagline (colonna flex, gap 1em), e aggiungi un wrapper di link legali (flex, gap 2em) con “Terms and Conditions” e “Privacy Policy”.
7. Componi griglia + Flexbox. Imposta il footer wrapper su display: grid. Al suo interno, il footer content è a sua volta una griglia di colonne a larghezza auto (ognuna un gruppo Flexbox di link); regola i gap e imposta justify-content: end per togliere lo spazio in eccesso. Sposta copyright e link legali dentro la griglia e allineali.

La prossima lezione è l’ultima del corso: prendiamo tutto quello che abbiamo costruito e lo rendiamo pienamente responsive — imparando ancora più Flexbox e griglia lungo la strada.