Come fissare un menu in cima alla pagina

‍Un'intestazione fissa (sticky header) è una struttura di navigazione che mantiene la sua posizione in cima alla finestra del browser mentre si scorre una pagina web, invece di scomparire con lo scorrimento. La struttura di navigazione può inizialmente trovarsi più in basso nella pagina. È un elemento di uso comune e, se il tuo sito web ha molti contenuti, probabilmente dovresti implementarne almeno una forma base, come una barra di navigazione con un menu.

‍Per creare un'intestazione semplice, inizia posizionando alcuni pulsanti di testo su una casella larga. I pulsanti saranno link a pagine del tuo sito web o a posizioni di scorrimento sulla stessa pagina. Un numero da 3 a 5 pulsanti è solitamente sufficiente per evidenziare le caratteristiche principali di un sito web senza sovraccaricare la barra. Anche un elemento menu può funzionare al posto dei pulsanti. Seleziona tutti i pulsanti e la casella larga, fai clic con il pulsante destro per aprire il menu e seleziona 'Raggruppa', oppure seleziona 'Raggruppa' dal menu 'Disponi' nella parte superiore dello schermo. Il gruppo appena creato offre l'opzione 'Fissa in alto' nella scheda Stile.

‍Abilita la casella di controllo 'Fissa in cima alla pagina', ora il tuo gruppo si fisserà in cima allo schermo.

‍Ricorda di occuparti di eventuali conflitti visivi che potrebbero derivare dal movimento della tua intestazione. In questo esempio, un bordo bianco sulla casella di sfondo dell'intestazione assicura che sia facilmente distinguibile quando posizionata davanti al contenuto della pagina ed è coerente con i bordi bianchi usati per separare gli elementi nelle nostre pagine. La coerenza è importante e spesso offre soluzioni naturali, come in questo caso.

‍Nota che se la posizione iniziale dell'intestazione non è in cima allo schermo, si attaccherà ad essa durante lo scorrimento, una volta che entrerà in contatto. Inoltre, l'attaccamento avverrà non appena il primo componente della tua intestazione entrerà in contatto. La strutturazione e il posizionamento relativo dei componenti della tua intestazione saranno preservati.

‍In altre parole, se vuoi che un'intestazione fissa non sia attaccata alla parte superiore dello schermo, dovrai inserire una casella invisibile tra di loro e aggiungerla al gruppo dell'intestazione.