EN IT
Home Chi sono Learn Blog

Costruire una navbar Webflow: struttura desktop e hover

Intermedio 51:52 webflownavbarflexboxclampaccessibilità

Ricostruisci da zero la navbar desktop di Webflow — struttura Flexbox solida, nav accessibile, spacing fluido con clamp() e un underline all'hover che non sposta il layout.

Guarda su YouTube

Punti chiave

  • Costruisci le fondamenta prima delle parti vistose: prima una struttura e un layout desktop puliti, poi la responsività, poi il mega menu e le animazioni.
  • Per l'accessibilità, ogni link di navigazione va dentro il nav menu (il <nav> semantico), e il gruppo di link primario rende meglio come lista non ordinata.
  • Il padding va sul dropdown toggle, non sul dropdown — il toggle è l'elemento davvero cliccabile, quindi il padding altrove riduce l'area cliccabile reale.
  • clamp() rende fluidi sia il testo sia lo spacing; il valore preferito nasce da una proporzione semplice (se 90rem = 100vw, allora 1rem ≈ 1.11vw).
  • Anima un underline all'hover con un box-shadow inset, mai con un bordo vero — un bordo cambia l'altezza dell'elemento e sposta tutta la navbar.

Capitoli del video

  1. 00:00 Intro
  2. 02:43 Aggiungere tutti gli elementi alla pagina
  3. 14:03 Dare stile agli elementi con Flexbox
  4. 20:26 Accessibilità + debug del layout
  5. 29:29 Stile del pulsante CTA e spacing
  6. 34:09 Introduzione alla funzione CSS clamp()
  7. 41:47 Ultimi fix di allineamento
  8. 42:30 Applicare le interazioni all'hover
  9. 50:52 Outro

Alla fine di questa lezione avrai ricostruito da una tela bianca la versione desktop della navbar di Webflow — struttura, layout, spacing fluido ed effetti hover inclusi. È la base di una serie completa che poi la rende responsive, aggiunge un vero mega menu e anima i dropdown.

Lo facciamo nel modo giusto: niente mega menu e niente responsive ancora, solo una struttura desktop solidissima. Fai bene quella e tutto il resto — mobile, dropdown, animazioni — si incastra invece di combatterti. Lungo la strada vediamo l’accessibilità fatta bene, il sizing fluido con clamp() e un underline all’hover che non rovina il layout.

Il riferimento è la navbar reale della homepage di Webflow, quindi la ispezioniamo mentre procediamo e ne rispecchiamo struttura e dettagli.

Come funziona

Lo scheletro è familiare: un elemento navbar che avvolge un main-container (max-width più padding orizzontale, come confine di layout) che avvolge un navbar_content-wrapper impostato su display: flex con justify-content: space-between. Questo divide la barra in un gruppo sinistro (brand + link primari) e un gruppo destro (link secondari + CTA).

La decisione più importante è l’accessibilità. Il nav menu di Webflow porta il tag semantico nav, quindi ogni link di navigazione — incluso il gruppo di destra e la CTA — va al suo interno, non sparso in wrapper fratelli. Un passo più in là, il gruppo di link primario è in realtà una lista, quindi rende meglio come lista non ordinata (list-style: none, item su inline-block). È il tipo di struttura su cui si appoggia chi usa uno screen reader.

Un’insidia sottile: il padding va sul dropdown toggle, non sul dropdown. Il toggle è l’elemento che apre davvero il menu, quindi se metti il padding sul wrapper il link sembra grande ma solo una strisciolina è cliccabile. Azzera il padding del dropdown e mettilo sul toggle.

Per il sizing andiamo pienamente fluidi con clamp(). Invece di valori fissi, font-size e gap scalano con il viewport tra un minimo e un massimo. Il valore preferito nasce da una proporzione: il nostro container arriva a 90rem, quindi se 90rem corrisponde a 100vw, allora 1rem ≈ 1.11vw. Applica la stessa idea al padding del container e a ogni gap e la navbar si riduce con grazia su tutto il range desktop senza andare a capo.

Infine, effetti hover che rispettano il layout. Un bordo inferiore vero cambia l’altezza di un elemento e sposta la navbar, quindi l’underline è un box-shadow inset trasparente (Y: -2px, blur: 0) il cui colore appare in animazione all’hover. E per rispecchiare il tocco di Webflow dove tutto il menu si smorza tranne il link su cui sei, il colore di ogni link è impostato su inherit: lo stato hover del nav menu sfuma tutto verso il grigio, mentre lo stato hover di ogni link lo tiene scuro.

Come si usa

  1. Struttura. Aggiungi una navbar → classe navbar (sfondo bianco, un sottile bordo inferiore di 1px). Dentro, un navbar_main-container (margini laterali auto, max-width: 90rem, padding orizzontale). Dentro ancora, un navbar_content-wrapper su display: flex, space-between.
  2. Aggiungi il contenuto. Brand link con il logo (incolla l’SVG in un Code Embed), un nav menu con tre dropdown (Platform, Solutions, Resources) e due link (Enterprise, Pricing), più un gruppo destro di due link e un pulsante CTA.
  3. Rendila accessibile. Sposta ogni link dentro il nav menu. Converti il gruppo primario in una lista non ordinata con i navbar_link-list-item; togli padding/margini di default e i pallini; imposta gli item su inline-block.
  4. Sistema l’area cliccabile del dropdown. Duplica la classe del dropdown, azzera il suo padding e sposta il padding verticale (1.5rem) sul toggle. Imposta il toggle su display: flex, centrato, con un piccolo gap per l’icona.
  5. Disponi. display: flex sui gruppi di link e sul nav menu; usa gap per lo spacing e grow if possible sul nav menu così riempie lo spazio dopo il brand. Centra tutto in verticale.
  6. Dai stile alla CTA. Sfondo blu, border-radius: 4px, padding, peso medium e i box-shadow a strati copiati dal pulsante di Webflow.
  7. Vai fluido con clamp(). Sostituisci font-size e gap fissi con clamp(min, preferitoVW, max) usando la proporzione 90rem = 100vw, così niente va a capo mentre il viewport si stringe.
  8. Aggiungi la rifinitura hover. Sulla CTA, transiziona background + box-shadow e scurisci all’hover. Su link e toggle, aggiungi un underline box-shadow inset trasparente che diventa blu all’hover; imposta il colore dei link su inherit così il menu sfuma al grigio mentre l’elemento su cui sei resta scuro. Transiziona anche il colore, così si anima.

Ecco la navbar desktop — strutturata, accessibile, fluida e interattiva. Prossimo episodio: renderla pienamente responsive per il mobile.

Risorse

Domande frequenti

Perché tutti i link della navbar dovrebbero stare dentro il nav menu in Webflow?
Il nav menu di Webflow porta il tag semantico nav, che dice alle tecnologie assistive che tutto ciò che c'è dentro è navigazione del sito. Tenere entrambi i gruppi di link, sinistro e destro, al suo interno — il gruppo primario come lista non ordinata — rende la navbar davvero accessibile, non solo corretta a vedersi.
Perché il mio dropdown toggle è cliccabile solo in una piccola area?
Il padding è probabilmente sul wrapper del dropdown invece che sul toggle. Il toggle è l'elemento che apre davvero il menu, quindi azzera il padding del dropdown e mettilo sul toggle — così la sua area cliccabile coincide con il link visibile.
Come aggiungo un underline all'hover ai link della navbar senza spostare il layout?
Non usare un bordo vero — aumenta l'altezza dell'elemento e sposta la navbar. Aggiungi invece un box-shadow inset trasparente in basso (Y: -2px, blur: 0) e rivelane il colore all'hover, con una transizione sul box-shadow per la fluidità.
Come faccio restare scuro un link della navbar mentre gli altri sfumano all'hover?
Imposta il colore di ogni link su inherit così segue il colore del nav menu, dai al nav menu un colore hover grigio, poi dai ai singoli link e toggle il loro colore hover scuro. Passando sul menu tutto sfuma tranne l'elemento su cui sei davvero.

← Torna al corso