← Tutte le guide Navigation

Come rendere sticky il menu di intestazione e piè di pagina in Shopify (senza modificare il codice)

Rendi sticky header e footer menu in Shopify: attiva lo sticky header del tema, risolvi i contenuti nascosti e aggiungi una barra a schede su mobile.

Per rendere sticky l’intestazione, apri Impostazioni tema > Intestazione e scegli un’opzione di Sticky header (Dawn include Nessuno, Quando si scorre verso l’alto, Sempre e Sempre, riduci dimensioni logo). Poiché la maggior parte dei temi non offre un menu footer sticky, aggiungi una barra a schede in basso con CSS o un’app e testa su uno smartphone reale.

Segui questa sequenza in tre passaggi per impostare la navigazione fissa a entrambi i poli dello schermo:

  1. Attivare l’impostazione dell’intestazione: Nel pannello di controllo Shopify, vai su Negozio online > Temi > Personalizza. Apri la sezione Intestazione (o Impostazioni tema > Intestazione), seleziona il comportamento Sticky header desiderato e salva.
  2. Aggiungere una barra a schede inferiore per mobile: Poiché i temi standard trattano il piè di pagina come una chiusura statica della pagina, integra un menu inferiore fisso usando CSS mirato o un’app di navigazione.
  3. Verificare sui dispositivi fisici: Ispeziona il tuo negozio su un telefono reale per verificare che né l’intestazione né la barra inferiore coprano titoli, pulsanti d’acquisto o barre di sistema.
Risultati tecnici principali
  • L'interfaccia a due poli: Gli sticky header mantengono branding, ricerca e carrello accessibili in alto, mentre i menu inferiori fissi operano come barre a schede ancorate nella comoda zona del pollice.
  • Flusso del documento e sovrapposizioni: Il posizionamento con position: fixed rimuove l'elemento dal flusso naturale azzerandone lo spazio, mentre position: sticky conserva la dimensione originale finché non si raggiunge la soglia.
  • La spesa in altezza delle due barre: Bloccare contemporaneamente header e barra inferiore su mobile comprime l'area visiva utile; mantenere un'intestazione snella ed evitare collisioni col pulsante Aggiungi al carrello protegge le conversioni.

Uno sticky header (intestazione fissa) rimane ancorato al bordo superiore della finestra del browser durante lo scorrimento verso il basso. Assicura che gli elementi essenziali per l’acquisto—come il logo del brand, i collegamenti alle collezioni principali, la barra di ricerca attiva e il carrello—siano raggiungibili senza dover scorrere nuovamente fino in cima a un lungo catalogo.

Al contrario, un menu footer sticky non corrisponde al piè di pagina tradizionale del sito contenente note legali, informative sulla privacy e loghi dei circuiti di pagamento. Nel web design contemporaneo, questa espressione indica una barra di navigazione inferiore per mobile (bottom tab bar) fissata al bordo inferiore dello schermo, che racchiude poche azioni chiave (Home, Cerca, Catalogo a cassetto, Preferiti e Carrello) a portata di pollice.

Differenza tra sticky e fixed in CSS

In CSS, position: sticky mantiene l’elemento all’interno del normale flusso del documento finché la finestra non raggiunge una determinata soglia di scorrimento. Secondo MDN Web Docs su CSS position, un elemento con position: sticky necessita di almeno un offset direzionale (top, bottom, left o right) per funzionare correttamente. Poiché preserva il proprio spazio nella pagina prima di ancorarsi, non causa salti improvvisi nel layout.

Al contrario, position: fixed rimuove completamente l’elemento dal normale flusso del documento. Come segnalato da MDN Web Docs, non viene riservato alcuno spazio nella struttura della pagina, inducendo i blocchi successivi a scivolare verso l’alto e a posizionarsi dietro l’elemento fisso. Inoltre, sia fixed che sticky istituiscono un nuovo contesto di impilamento (stacking context), alterando la gerarchia dei valori z-index.

Metodo 1: Attivare lo sticky header nelle impostazioni del tema

Se il tuo negozio adotta il tema ufficiale Dawn di Shopify o un tema moderno Online Store 2.0, non occorre modificare alcun codice. La funzionalità è integrata direttamente nell’editor visivo.

  1. Nel pannello di amministrazione Shopify, entra in Negozio online > Temi.
  2. Individua il tema da modificare e fai clic su Personalizza.
  3. Nella barra laterale sinistra, premi sulla sezione Intestazione (o accedi a Impostazioni tema > Intestazione a seconda della versione).
  4. Scorri fino al menu a discesa Sticky header, scegli l’opzione desiderata e premi Salva.

Le quattro opzioni di Sticky header in Dawn

Nel tema di riferimento Dawn di Shopify, la configurazione dell’intestazione mette a disposizione quattro modalità distinte:

Opzione di configurazione Comportamento nello storefront Caso d’uso consigliato
Nessuno (None) L’intestazione scorre naturalmente assieme ai contenuti e scompare scendendo verso il basso. Negozi mono-prodotto, landing page focalizzate o contesti in cui massimizzare lo spazio verticale.
Quando si scorre verso l’alto (On scroll up) L’intestazione si nasconde scendendo verso il basso e riappare fluidamente quando si risale. Store con ampie collezioni di prodotti; è la scelta predefinita nel codice sorgente di Dawn.
Sempre (Always) L’intestazione rimane costantemente fissata in cima allo schermo mantenendo l’altezza iniziale. Negozi in cui barra di ricerca, selettore di valuta e carrello devono essere visibili a qualunque profondità.
Sempre, riduci dimensioni logo Rimane sempre fissa ma rimpicciolisce il logo per occupare meno altezza sullo schermo. Brand con loghi con sviluppo verticale che rischierebbero di coprire le immagini dei prodotti.

Come indicato nel repository GitHub ufficiale di Shopify Dawn, Dawn assegna on-scroll-up come valore predefinito a sticky_header_type e adotta position: sticky per l’elemento.

Le ricerche condotte dal Nielsen Norman Group sugli sticky header confermano la validità di questo modello: le intestazioni parzialmente persistenti presumono che qualunque risalita indichi la volontà dell’utente di navigare o controllare il carrello. Nascondendo la barra mentre si legge verso il basso, lo store massimizza la superficie visiva senza ostacolare l’accesso ai menu.

Altri temi Online Store 2.0

Altri temi Online Store 2.0 possono offrire un’impostazione simile, ma nome e opzioni possono differire da quelli di Dawn. Verifica sempre i parametri nativi dell’intestazione prima di scrivere CSS; se non esiste un’impostazione del genere, passa al metodo CSS descritto più sotto. Se stai sviluppando su Dawn, approfondisci il funzionamento di Navi+ sul tema Dawn.

Preferisci una spiegazione visiva? Questo video illustra la procedura all’interno dell’editor del tema:

Metodo 2: Rendere sticky l’intestazione con CSS personalizzato

Qualora tu stia utilizzando un tema personalizzato o un layout che non offre l’opzione nativa per l’intestazione fissa, puoi impostarla via CSS senza dover toccare il file theme.liquid.

Duplica il tema prima di iniziare

Prima di modificare gli stili del negozio, crea sempre una copia di sicurezza del tema attivo. Come consiglia il Centro assistenza Shopify sulla duplicazione dei temi: “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes.”

Per duplicare il tema, vai su Negozio online > Temi, clicca sull’icona con tre puntini (...) accanto al tema in uso e scegli Duplica. Effettua test e prove su questa copia prima di renderla operativa.

Dove incollare il codice CSS

Shopify mette a disposizione un box per il CSS personalizzato direttamente nell’interfaccia dell’editor. Vai su Negozio online > Temi > Personalizza, premi sull’icona a forma di ingranaggio (Impostazioni tema) a sinistra e apri il pannello CSS personalizzato.

In conformità alla guida ufficiale Shopify sull’aggiunta di CSS, le regole inserite in questo campo globale hanno effetto sull’intero negozio e prevedono un limite di 1.500 caratteri. Se inserisci il CSS all’interno di una singola sezione, Shopify ne circoscriverà l’applicazione unicamente a quel blocco, impedendo l’ancoraggio a livello globale.

/* Esempio — adatta i selettori al tuo tema e collauda su una copia duplicata */
.section-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

Questa istruzione applica position: sticky al contenitore dell’intestazione. Come definito da MDN Web Docs, un elemento sticky necessita di una coordinata limite—in questo caso top: 0 stabilisce che l’elemento si fisserà non appena il bordo superiore toccherà la sommità della finestra. La proprietà z-index: 3 ne garantisce la visibilità sopra testi e immagini.

Presta molta attenzione ai vecchi tutorial reperibili nei forum. Molti post diffusi nella Shopify Community—come la nota guida per il vecchio tema Debut (Shopify Community)—fanno largo uso di jQuery e script JavaScript non standard. Il thread stesso precisa che si tratta di un tutorial avanzato non supportato da Shopify: non copiare i suoi script in un tema attuale. Questa guida usa solo impostazioni del tema e CSS.

Risolvere i problemi più comuni dello sticky header

Prima e dopo: contenuto coperto sotto lo sticky header, poi risolto con scroll-padding in modo che il titolo sia visibile Figura 1: Illustrazione del concetto — Eliminazione di contenuti coperti e conflitti di sovrapposizione con scroll-padding-top.

Fissare una barra di navigazione incide sulla struttura geometrica della pagina e sull’ordine di sovrapposizione visiva. Se si manifestano anomalie, dipendono quasi invariabilmente da quattro cause CSS ricorrenti.

Contenuto nascosto sotto l’intestazione

Il problema più ricorrente riscontrato dai commercianti è l’involontaria scomparsa di banner o titoli di sezione dietro la barra dell’intestazione appena la pagina viene caricata (discussione nella Shopify Community).

Questo disguido ha luogo quando viene impostato position: fixed al posto di position: sticky. Poiché il posizionamento fisso estrae l’elemento dal flusso del documento (MDN Web Docs), i contenuti sottostanti slittano verso l’alto. Passare a position: sticky risolve la questione immediatamente, in quanto l’elemento conserva il suo ingombro originario prima dello scroll.

Qualora il layout richieda obbligatoriamente un elemento fixed, o nel caso in cui i collegamenti ad ancore interne (come #recensioni o #specifiche) finiscano coperti dalla barra, aggiungi la proprietà scroll-padding-top all’elemento HTML radice. Come documentato su MDN Web Docs, questa regola riserva un margine superiore durante lo scorrimento:

/* Esempio — adatta i selettori al tuo tema e collauda su una copia duplicata */
html {
  scroll-padding-top: 80px; /* valore segnaposto: sostituiscilo con l'altezza misurata della tua intestazione */
}

Misura sempre l’altezza esatta in pixel dell’intestazione del tuo specifico negozio tramite i DevTools del browser; non copiare valori generici trovati online poiché le dimensioni variano considerevolmente da store a store.

L’intestazione perde l’ancoraggio (errore di overflow)

Uno scenario frequente riguarda intestazioni fisse che smettono di aderire improvvisamente dopo l’installazione di un’applicazione per caroselli o di banner promozionali esterni.

Il fondamento tecnico è spiegato da MDN Web Docs: un elemento sticky si ancora al genitore più prossimo dotato di un meccanismo di scorrimento. Se un elemento antenato (html, body o un contenitore principale) presenta le proprietà overflow: hidden, overflow: auto o scroll, l’intestazione si legherà a quel contenitore e non alla finestra del browser. Se l’antenato non scorre, l’intestazione resterà bloccata. Rimuovi le proprietà overflow superflue dai contenitori contenitori.

L’intestazione scivola sotto altri elementi (z-index)

Scorrendo la pagina in corrispondenza di video o widget di recensioni, l’intestazione potrebbe finire al di sotto di essi. Al contrario, i menu a tendina o il carrello a scomparsa potrebbero risultare tagliati.

Dato che position: sticky e position: fixed danno vita a un nuovo contesto di impilamento (MDN Web Docs), i nodi interni vengono calcolati in relazione al livello dell’intestazione. Assegna all’intestazione un z-index adeguato, garantendo che finestre modali e carrello a scorrimento mantengano un valore superiore a quello dell’intestazione.

Disattivare l’intestazione fissa unicamente su dispositivi mobili

Sui telefoni con altezze di schermo contenute, un’intestazione perenne può sottrarre troppo spazio. Puoi circoscrivere l’effetto sticky ai soli computer desktop tramite una semplice media query:

/* Esempio — adatta i selettori e il breakpoint (qui 750px) al tuo tema e collauda su una copia duplicata */
@media (min-width: 750px) {
  .section-header {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

Il campo CSS di Shopify supporta le query @media (Centro assistenza Shopify). In Dawn puoi anche impostare l’opzione su Nessuno o Quando si scorre verso l’alto. Evita l’iniezione tardiva di classi via JavaScript dopo il caricamento della pagina, poiché causa improvvisi slittamenti di layout dannosi per i Core Web Vitals. Come raccomandato da Google web.dev su CLS, i siti devono mantenere un punteggio CLS pari o inferiore a 0,1.

La tabella sottostante riassume i malfunzionamenti più comuni e i relativi accorgimenti tecnici:

Sintomo / Problema Causa architetturale primaria Soluzione consigliata
Contenuto tagliato al caricamento iniziale L’intestazione usa position: fixed, annullando lo spazio nel layout. Passare a position: sticky o aggiungere padding superiore al contenitore.
I link interni finiscono sotto l’intestazione Lo scorrimento punta al bordo superiore senza compensare la barra fissa. Impostare html { scroll-padding-top: <altezza>; } misurando l’intestazione.
L’intestazione non si fissa durante lo scroll Un elemento padre contiene overflow: hidden, scroll o auto. Ispezionare i contenitori superiori (html, body) e rimuovere l’overflow.
Banner o moduli scivolano sopra la barra Conflitto nel contesto di impilamento e z-index dell’intestazione insufficiente. Incrementare il z-index dell’intestazione mantenendo il carrello più in alto.
Schermo mobile eccessivamente sacrificato L’intestazione assorbe troppa altezza verticale sui telefoni. Adottare ‘Quando si scorre verso l’alto’ o disattivare lo sticky su mobile.

Se da un lato gli sticky header sono ampiamente diffusi, la seconda metà della ricerca—un menu footer sticky—evidenzia un vuoto significativo nell’architettura standard dei temi.

Nei temi Shopify, il ‘piè di pagina’ è pensato come un blocco di chiusura statico in fondo al documento. Contiene usualmente numerose colonne informative: presentazione del brand, assistenza clienti, informative legali e loghi di pagamento. Fissare un piè di pagina tradizionale completo in fondo a un display mobile oscurerebbe la quasi totalità dello schermo, impedendo la consultazione dei prodotti.

Ciò che commercianti e acquirenti intendono realmente con ‘menu footer sticky’ è una barra a schede inferiore per mobile (bottom tab bar)—una striscia compatta ancorata alla base dello schermo. La maggior parte dei temi non include questa barra nativamente. Per implementarla, i gestori possono scrivere codice CSS con sezioni Liquid dedicate oppure ricorrere a un’applicazione specializzata.

Costruire una barra inferiore fissa con CSS personalizzato

Nel caso in cui tu scelga di sviluppare una barra inferiore via CSS, l’impostazione richiede una posizione fissa bloccata al margine inferiore:

/* Esempio — adatta i selettori al tuo tema e collauda su una copia duplicata */
.my-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

body {
  padding-bottom: 60px;
}

Poiché position: fixed esclude la barra dal flusso del documento (MDN Web Docs), è imperativo aggiungere un corrispondente padding-bottom al tag body. In assenza di questo distanziatore, la barra coprirà stabilmente i veri link del footer e i widget di chat. Tieni presente che dovrai sviluppare autonomamente il codice HTML/Liquid per mostrare icone e menu e mantenerlo aggiornato dopo ogni revisione del tema.

Gestire la Safe Area su iPhone

I telefoni moderni privi di tasto Home fisico (come i modelli iPhone recenti) mostrano una linea di sistema per le gesture nella parte bassa dello schermo. Se una barra inferiore viene posizionata senza margine hardware, i pulsanti entreranno in conflitto con i comandi del sistema operativo.

Come illustrato da MDN Web Docs sulla funzione CSS env(), le distanze di sicurezza possono essere introdotte per mezzo delle variabili d’ambiente standard:

/* Esempio — adatta i selettori al tuo tema e collauda su una copia duplicata */
.my-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

L’utilizzo di env(safe-area-inset-bottom) garantisce che i pulsanti della barra inferiore rimangano sempre perfettamente cliccabili e lontani dai gesti di sistema. Per approfondire le tematiche legate all’ergonomia su mobile, consulta la nostra guida su navigazione inferiore e progettazione della tab bar su Shopify.

Utilizzare sticky header e barra inferiore insieme su mobile

Smartphone con sticky header e barra inferiore fissa: confronto tra pulsante di acquisto coperto e impaginazione equilibrata Figura 2: Illustrazione del concetto — Bilanciamento di due barre permanenti su mobile per evitare interferenze col carrello.

Configurare congiuntamente un’intestazione fissa e una barra a schede inferiore introduce una sfida ergonomica: la concorrenza per l’altezza dello schermo.

Sui monitor desktop di solito c’è abbastanza spazio verticale per un’intestazione. Su smartphone, invece, l’area visiva è ridotta. I dati dello studio del Nielsen Norman Group evidenziano come la conservazione dello spazio su schermo rappresenti un aspetto prioritario sui dispositivi mobili.

Se entrambe le barre restano perennemente visibili con altezze generose, agli acquirenti rimane solo una fessura per guardare i prodotti. Per garantire un’esperienza gratificante, applica questi principi guida:

  1. Mantieni l’intestazione essenziale: Sfrutta in Dawn la modalità Quando si scorre verso l’alto, che ritira l’intestazione durante la lettura verso il basso, oppure Sempre, riduci dimensioni logo per mantenere più piccola un’intestazione fissa.
  2. Evita collisioni con il pulsante Aggiungi al carrello: Sulle schede prodotto, alcuni temi prevedono un proprio pulsante d’acquisto fisso in basso. Se la tua barra di navigazione siede a bottom: 0, rischia di oscurare il tasto d’acquisto. Effettua sempre verifiche rigorose sulle pagine prodotto su smartphone.
  3. Tutelare la visibilità del focus da tastiera (WCAG 2.4.11): La direttiva di accessibilità W3C WCAG 2.4.11 (Focus Not Obscured - Minimum) prescrive che gli elementi interattivi selezionati tramite tastiera non debbano essere interamente celati da contenuti fissi creati dall’autore. Definire contestualmente scroll-padding-top e scroll-padding-bottom (MDN Web Docs) fa sì che i controlli scorrano sempre in zona visibile.
  4. Garantire dimensioni di tocco adeguate (WCAG 2.5.8): Secondo lo standard W3C WCAG 2.5.8 (Target Size - Minimum), i bersagli tattili su dispositivi touch devono estendersi per almeno 24 per 24 pixel CSS per azzerare tocchi accidentali.

Per esplorare architetture di navigazione evolute, consulta i nostri articoli su navigazione mobile oltre il menu hamburger e la guida all’accessibilità della navigazione.

Compromessi: quando non conviene rendere i menu sticky

Le barre fisse offrono indubbi vantaggi, ma non risultano indicate per qualsiasi tipologia di negozio o impaginazione. Come sottolineato da Page Laubheimer nella ricerca del Nielsen Norman Group: “Sticky headers can be a positive addition to a site, but only if they truly serve a purpose for your users.”

Esamina attentamente questi compromessi prima di rendere fissi i tuoi elementi:

  • Negozi mono-prodotto o con cataloghi ristretti: Se lo store vende pochi articoli tramite pagine di presentazione dirette, i visitatori non necessitano di saltare continuamente tra le categorie. Una barra fissa riduce solo lo spazio visivo senza offrire vantaggi tangibili.
  • Presenza di molteplici elementi fissi: Se il tema dispone già di una barra ‘Aggiungi al carrello’ ancorata in basso, banner informativi o bolle di chat, aggiungere un’ulteriore barra inferiore provoca un fastidioso sovraffollamento visivo.
  • Onere manutentivo durante gli aggiornamenti del tema: Ogni riga di CSS personalizzato aggiunta al tema rappresenta codice che dovrai curare nel tempo. Come segnalato nella documentazione Shopify sul CSS, i futuri aggiornamenti delle strutture grafiche possono ridenominare classi e richiedere correzioni manuali.

Per individuare la formula di navigazione più idonea alla tua offerta merceologica, consulta la nostra guida per scegliere il giusto tipo di menu per il tuo negozio.

Il ruolo di Navi+: una barra a schede inferiore senza codice

Precisiamo subito con chiarezza: Navi+ non crea né gestisce sticky header. I controlli interni del tema (Metodo 1) o il CSS personalizzato globale (Metodo 2) rimangono la soluzione adatta per la sommità della pagina.

La funzione di Navi+ consiste nel risolvere l’altra metà della richiesta: il menu footer sticky trascurato dai temi convenzionali. Invece di dover creare sezioni Liquid da zero e calcolare offset complessi per le safe-area via CSS, Navi+ mette a disposizione una Tab Bar: una barra di menu fissata in fondo allo schermo che costruisci da modelli direttamente nell’app.

Cosa fa la Tab Bar:

  • Funzionamento su tutte le pagine: La Tab Bar di Navi+ resta visibile su tutte le pagine del negozio (Documentazione Navi+), e la struttura del suo menu supporta fino a 3 livelli.
  • Attivazione immediata senza toccare codice: L’integrazione sfrutta le App embeds di Shopify. Secondo la guida alla pubblicazione di Navi+, crei il menu nell’app, accedi a Negozio online > Temi > Personalizza > App embeds, abiliti Store Connector e premi Salva.
  • Regole di visualizzazione: I menu possono essere mostrati o nascosti in base al dispositivo (mobile o desktop), al tipo di pagina (come home, prodotto o collezione) o a parole chiave dell’URL (Documentazione Navi+). Per esempio, puoi mostrare la Tab Bar solo su mobile.

Come per qualunque modifica di layout, raccomandiamo di verificare l’aspetto su una versione duplicata del tema (Guida alla duplicazione temi di Shopify).

If you’d rather not maintain custom CSS for the bottom bar, Navi+ Tab Bar gives you a sticky bottom menu you can set up from templates and limit to mobile — try it on a duplicate theme first. Per consultare i passaggi ufficiali, scopri come pubblicare la Tab Bar su Shopify.

Checklist operativa

  • Duplicare il tema: Creare un backup in Negozio online > Temi prima di apportare cambi di impostazione o inserire codice CSS.
  • Configurare lo sticky header: Scegliere la modalità più idonea nelle impostazioni del tema (‘Quando si scorre verso l’alto’ o ‘Sempre’).
  • Verificare la fluidità di scorrimento: Scorrere su e giù nelle pagine di collezione e di prodotto per constatare la morbidezza delle animazioni.
  • Controllare le ancore interne: Provare i salti verso sezioni interne (#recensioni, #dettagli) per evitare che finiscano coperti; applicare scroll-padding-top se necessario.
  • Ispezionare la scala dei livelli sovrapposti: Aprire menu a discesa, mega menu e carrello a comparsa per appurare che compaiano sopra l’intestazione.
  • Impostare la barra inferiore: Aggiungere la barra a schede mobile via CSS o con l’app, verificando env(safe-area-inset-bottom) e il padding sul body.
  • Audit delle pagine prodotto: Controllare su mobile che la barra inferiore non intralci il pulsante Aggiungi al carrello o le opzioni di acquisto rapido.
  • Collaudare accessibilità e dispositivi reali: Navigare con il tasto Tab per testare la visibilità del focus ed eseguire prove su smartphone iPhone e Android reali.

FAQ

Come posso rendere sticky l’intestazione e il menu del piè di pagina in Shopify?

Per l’intestazione, attiva l’opzione Sticky header presente nelle impostazioni del tema (come ‘Quando si scorre verso l’alto’ in Dawn). Per il piè di pagina, non essendo presente di serie, aggiungi una barra a schede inferiore via CSS fisso o tramite un’apposita app.

Perché il contenuto della pagina finisce coperto dietro l’intestazione fissa?

Questo accade solitamente quando si applica position: fixed, che rimuove l’elemento dal flusso del layout senza riservare spazio. Passare a position: sticky o assegnare scroll-padding-top al tag HTML risolve la sovrapposizione.

Perché il mio sticky header ha smesso improvvisamente di funzionare?

Un’intestazione fissa smette di ancorarsi se un contenitore genitore presenta overflow: hidden, scroll o auto. In CSS, gli elementi sticky rimangono vincolati al contenitore con scorrimento più vicino anziché alla finestra.

Posso mantenere l’intestazione sticky su desktop e disattivarla su mobile?

Certamente. Se utilizzi CSS personalizzato, racchiudi le dichiarazioni all’interno di una media query min-width che corrisponda al breakpoint del tuo tema. Se utilizzi un’app come Navi+ per la barra inferiore, imposta la sua regola di visualizzazione per dispositivo in modo che compaia solo su mobile.

Una barra inferiore fissa coprirà la barra Home dell’iPhone?

Una barra inferiore rischia di sovrapporsi ai comandi gestuali se non si considerano le safe area. L’inserimento di env(safe-area-inset-bottom) nel padding assicura che le icone rimangano al di sopra dei gesti di sistema.

Uno sticky header è dannoso per la user experience (UX)?

Le evidenze del Nielsen Norman Group attestano che gli sticky header sono preziosi quando agevolano funzioni chiave. Tuttavia, su smartphone, devono risultare molto compatti o nascondersi durante la discesa per non rubare visibilità ai prodotti.

Fonti

  1. Schema di lingua predefinito del tema Dawn (Shopify): locales/en.default.schema.json
  2. Codice sorgente della sezione Header del tema Dawn (Shopify): sections/header.liquid
  3. MDN Web Docs — Proprietà CSS position: developer.mozilla.org/en-US/docs/Web/CSS/position
  4. MDN Web Docs — Proprietà CSS scroll-padding-top: developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
  5. MDN Web Docs — Funzione CSS env(): developer.mozilla.org/en-US/docs/Web/CSS/env
  6. W3C Web Accessibility Initiative — Criterio WCAG 2.4.11 Focus Not Obscured (Minimum): w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
  7. W3C Web Accessibility Initiative — Criterio WCAG 2.5.8 Target Size (Minimum): w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
  8. Nielsen Norman Group — Analisi sugli Sticky Header (Page Laubheimer): nngroup.com/articles/sticky-headers/
  9. Google web.dev — Ottimizzazione di Cumulative Layout Shift (CLS): web.dev/articles/cls
  10. Centro assistenza Shopify — Aggiunta di CSS personalizzato al tema: help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
  11. Centro assistenza Shopify — Duplicazione dei temi: help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes
  12. Community Shopify — Discussione su Sticky/Fixed Header Menu: community.shopify.com/t/sticky-fixed-header-menu/308093
  13. Community Shopify — Guida Sticky/Fixed Header per Debut: community.shopify.com/t/sticky-fixed-header-and-navigation-for-debut-theme/3640
  14. Centro assistenza Navi+ — Pubblicare la Tab Bar su Shopify: help.naviplus.io/docs/usage/tabbar-bottom-navigation/publishing-on-shopify/
  15. Centro assistenza Navi+ — Configurazione e targeting della Tab Bar: help.naviplus.io/docs/usage/tabbar-bottom-navigation/how-to-use/

Esplora gli argomenti

Questa guida rimanda ad articoli mirati — approfondisci ogni tema.

Condividi Facebook X LinkedIn

Crea una navigazione che i tuoi clienti adoreranno

Navi+ ti aiuta a creare menu ad alta conversione per Shopify e qualsiasi sito web — senza codice.

Prova Navi+ gratis See Live Demo →
Explore menus: Bottom Tab Bar • Mega Menu • Mobile Drawer • Floating FAB • Plans & Pricing

Inizia con Navi+

Scegli la tua piattaforma — gratuito da installare, live in minuti.