Apri il tuo negozio Shopify sullo smartphone, tocchi l’icona con le tre righe (hamburger) per esplorare una collezione e non accade nulla. Oppure il cassetto laterale si apre per una frazione di secondo e si richiude all’istante, o le categorie principali appaiono ma i sottomenu rifiutano di espandersi. Se chi naviga non riesce ad aprire il menu da cellulare, esplorare il tuo negozio diventa molto più difficile.
- Tre Cause Distinte: «Il menu non si apre» può significare un cassetto nascosto da regole CSS o da markup del tema danneggiato, una regola hover in conflitto con gli schermi touch, o sottomenu non nidificati nel pannello admin.
- Sicurezza Prima di Tutto: Duplica sempre il tema prima di modificare il codice ed esegui i test di navigazione su un vero smartphone anziché affidarti solo alla finestra ridotta del computer.
- Realtà della Manutenzione: Le regole CSS inserite manualmente nei file del tema vengono spesso cancellate ad ogni aggiornamento della versione, rendendo le app dedicate una valida alternativa senza manutenzione di codice.
Quick answer: why a Shopify mobile menu won’t open
Most Shopify mobile menus fail for one of three reasons: the drawer is hidden by CSS or broken theme markup, a hover-only dropdown fights with touch, or submenu links are not nested in Content > Menus. Duplicate your theme, check each cause in that order, and test on a real phone.
Questa guida è studiata specificamente per i temi Shopify; i menu su WordPress o Wix operano secondo logiche differenti. Esamina con cura e nell’ordine indicato le cause illustrate di seguito su una copia duplicata del tema, mantenendo al sicuro il negozio online attivo durante le verifiche.
Three different problems: menu won’t open, opens the wrong way, submenu won’t expand
Quando i commercianti lamentano che il proprio menu mobile non funziona, descrivono uno di cinque sintomi comuni. Prima di toccare impostazioni o modificare codice, individua quale riga descrive la tua situazione:
| Sintomo | Causa probabile | Dove intervenire |
|---|---|---|
| L’icona hamburger non produce alcun effetto | Cassetto nascosto da CSS o markup del tema corrotto | Verificare cassetto nascosto e markup del tema |
| Si apre e si chiude all’istante / sfarfalla al tocco | Menu a discesa basato su hover in conflitto col tocco | Passare all’apertura al tocco |
| Le voci del sottomenu non compaiono | Voci non nidificate in Contenuto > Menu o tema compresso | Verificare nidificazione e impostazioni del tema |
| Il cassetto ricopre l’intero schermo | Impostazioni di larghezza o stile del cassetto nel tema | Regolare larghezza e stile del cassetto |
| Il menu funziona solo da computer | Impostazioni intestazione mobile configurate a parte | Verificare impostazioni intestazione mobile e stile cassetto |
Ciascun sintomo interessa un livello tecnico specifico della vetrina. Un’icona che non reagisce può indicare un’interruzione di script o un cassetto reso invisibile tramite CSS. Al contrario, voci che sfarfallano possono nascere da regole hover progettate per il mouse che si comportano in modo strano al tocco. Ricorda che in alcuni temi le intestazioni per mobile e desktop possono essere configurate in modo indipendente.
Before you edit code: duplicate your theme and test on a real phone
Prima di intervenire sui file di template o sui fogli di stile del tema, proteggi il tuo negozio attivo con due precauzioni essenziali.
In primo luogo, duplica il tuo tema attivo. Come riportato nella guida alla duplicazione dei temi di Shopify: “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes and start again if you need to.” Dal pannello di amministrazione Shopify, vai su Negozio online > Temi, fai clic sui tre puntini (...) accanto al tema attuale e scegli Duplica. Esegui tutte le verifiche e le prove di codice esclusivamente su questo duplicato.
In secondo luogo, testa la navigazione su uno smartphone reale. La visualizzazione responsive degli strumenti di sviluppo su computer è utile, ma non equivale a uno smartphone reale. Shopify consiglia espressamente di testare i menu sui dispositivi mobili per accertarsi che i menu a discesa si espandano correttamente. Un dispositivo fisico può mostrare problemi touch che gli emulatori desktop potrebbero non rilevare.
Prendi nota anche di eventuali app o script aggiunti di recente. Strumenti promozionali, Google Tag Manager, estensioni SEO e page builder possono aggiungere script che potrebbero ostacolare la navigazione. Controlla prima l’editor del tema, poiché il comportamento del menu mobile è controllato nell’editor del tema sotto la sezione Intestazione in molti temi.
Hamburger icon does nothing: hidden drawer CSS and broken theme.liquid
Se toccando l’icona hamburger non si ottiene alcuna risposta, il negozio si trova solitamente di fronte a un errore JavaScript che arresta l’evento di apertura, oppure a una proprietà CSS che forza il cassetto all’invisibilità.
Check the browser console and recent apps
Inizia verificando l’esecuzione degli script nella console del browser. Collega il telefono al computer tramite debug USB, oppure apri il negozio in un browser desktop ridimensionato a larghezza smartphone e attiva gli strumenti per sviluppatori (F12 o clic destro > Ispeziona).
Seleziona la scheda Console e tocca il pulsante hamburger. Cerca messaggi di errore evidenziati in rosso, come Uncaught TypeError o SyntaxError. Un’eccezione non gestita può arrestare l’esecuzione degli script successivi, impedendo l’avvio della funzione del menu. Se l’errore riconduce a un’applicazione installata di recente, disattiva temporaneamente il relativo blocco in Negozio online > Temi > Personalizza > Incorporamenti app per verificare se il pulsante riprende a funzionare.
Restore the top lines of theme.liquid
Se la console registra fallimenti estesi a tutta la pagina, ispeziona il file di template principale. Il file layout/theme.liquid contiene lo scheletro HTML di primo livello della pagina su cui si basano gli script del tema.
In un caso segnalato nella community Shopify, il menu mobile di un negozio ha smesso di funzionare dopo che le prime due righe di theme.liquid erano state rimosse mentre qualcuno aggiungeva un tag di Google Tag Manager. Si tratta di una causa probabile segnalata da un esercente, non di una soluzione confermata ufficialmente, ma mostra perché vale la pena controllare se mancano righe all’inizio del file. Vai su Negozio online > Temi > … > Modifica codice, apri layout/theme.liquid e confronta le prime righe con una copia integra dello stesso tema per individuare ciò che è stato rimosso.
A CSS rule that forces the drawer visible (last resort)
In alcune circostanze, il JavaScript del tema esegue regolarmente lo scambio di classi, ma proprietà CSS mantengono il cassetto fuori schermo o visivamente nascosto.
Ad esempio, in una discussione della community Shopify sul tema Dawn, un commerciante ha confermato che il cassetto è tornato visibile dopo aver inserito una media query in base.css:
/* Example reported in a Shopify Community thread for Dawn theme base.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
.menu-opening .menu-drawer {
transform: translate(0);
visibility: visible;
}
}
In un altro caso relativo a un tema differente, un utente ha confermato che il menu ha ripreso a funzionare aggiungendo visibility: visible alla regola del menu dentro main.css (discussione della community Shopify 389597):
/* Example reported in a Shopify Community thread for main.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
.main-menu__disclosure.is-open > .main-menu__content {
opacity: 1;
visibility: visible;
}
Allo stesso modo, un altro membro ha trovato utile un selettore mirato sui tag details aperti come .js details[open] > .menu-drawer (discussione della community Shopify 395768).
Considera queste regole CSS esclusivamente come esempi documentati su specifici temi e versioni, mai come correzioni universali. I selettori cambiano sensibilmente tra un tema e l’altro. Inoltre, forzare la visibilità con il CSS si limita a celare il problema se la causa scatenante è un errore JavaScript o un markup incompleto. Tieni a mente tre riferimenti per la diagnosi: visibility hidden, broken theme.liquid, e check the browser console.
Figure 1: Concept illustration — Diagram of a Shopify mobile drawer hidden by CSS next to the same drawer made visible after checking markup and styles.
Hover dropdowns on touch screens: open on tap instead
Se il menu su smartphone si apre per un attimo e si richiude di scatto, o se i sottomenu sfarfallano quando tocchi una voce, una causa frequente è una regola hover pensata per il mouse.
In base a MDN Web Docs, la media query @media (hover: none) descrive contesti in cui “the primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap)” (documentazione MDN su hover). Al contrario, @media (hover: hover) si applica quando “the primary input mechanism can conveniently hover over elements.”
Quando stili CSS personalizzati o del tema desktop legano l’espansione dei sottomenu allo stato :hover senza controllare le capacità del dispositivo, gli schermi touch possono provare a emulare il passaggio del mouse. Di conseguenza un menu a discesa può aprirsi e chiudersi subito al tocco, oppure il tocco non si comporta come la regola hover si aspetta.
Per rimediare a questo conflitto, passa all’apertura al tocco limitando le regole hover esclusivamente ai dispositivi dotati di vero puntatore:
/* Restrict hover behavior to devices with true pointer hover capability */
/* Placeholder selectors for illustration only: replace them with your theme's own classes. */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (hover: hover) {
.header__menu-item:hover .header__submenu {
display: block;
}
}
Racchiudendo le regole hover dentro @media (hover: hover), smartphone e tablet tornano alle aperture al tocco native del tema. Aprire un sottomenu con l’hover è complicato sulle intestazioni touch: in una discussione nella community Shopify su Dawn, un utente ha scritto di non vedere un modo per farlo solo con CSS; probabilmente serve JavaScript oppure conviene mantenere il comportamento predefinito del tema.
Submenus that should expand: nesting, theme settings, and CSS
Quando le voci principali compaiono regolarmente nel cassetto mobile ma i sottomenu non si espandono, la difficoltà risiede per lo più nell’organizzazione dei livelli.
Verifica innanzitutto la struttura nel pannello di amministrazione Shopify in Contenuto > Menu. Come illustrato nella guida ai menu a discesa di Shopify: “You can build drop-down menus by creating or moving menu items so that they’re nested below a top-level item.” Ciascun elemento secondario deve essere nidificato sotto la voce genitore nell’editor del menu; un elemento non nidificato resta una voce di primo livello.
Shopify definisce con chiarezza la profondità massima consentita: “The top-level item can have up to two levels of nested drop-down menus.” Questo offre tre livelli totali:
- Voce di primo livello (es. Abbigliamento)
- Primo livello di sottomenu nidificato (es. Donna)
- Secondo livello di sottomenu nidificato (es. Giacche)
Su mobile, molti temi visualizzano le voci genitore dotate di elementi figli come pulsanti di espansione anziché link diretti. Toccando il nome principale si apre la lista sottostante senza ricaricare la pagina. Se desideri che i clienti possano raggiungere anche la pagina della collezione principale, aggiungi un link dedicato (come “Vedi tutto”) in cima alla lista secondaria.
Se la nidificazione nel pannello è corretta ma il sottomenu rifiuta comunque di aprirsi su smartphone, il tema potrebbe richiedere correzioni di stile. Shopify segnala che “some themes might require CSS adjustments to improve mobile usability.” Se scrivi regole CSS, limitale con rigore a media query per mobile (come @media (max-width: 749px)) e applicale solo ai selettori del cassetto per non alterare la visualizzazione da computer. Per un quadro completo, consulta la nostra Shopify menu guide approfondita.
Drawer opens full width or the wrong style
Talvolta il menu mobile si apre, ma in un modo che penalizza l’usabilità. Alcuni esercenti notano che il pannello di navigazione copre l’intero schermo del telefono e nasconde la vetrina sottostante.
Nelle discussioni tra esercenti, alcuni dicono di preferire un cassetto che non copra l’intero schermo (discussione della community Shopify 275308). Un cassetto che occupa lo schermo da bordo a bordo nasconde la pagina dietro di sé; una fascia oscurata ancora visibile può rendere più chiaro che il pannello si può chiudere.
Prima di intervenire sul codice, verifica le opzioni del tuo tema. Nei temi moderni, il comportamento del menu mobile è gestito nell’editor del tema sotto la sezione Intestazione. Inoltre, alcuni temi consentono di gestire l’intestazione separatamente per mobile e desktop.
Se il tema non prevede una regolazione nativa per la larghezza del cassetto mobile, puoi sperimentare un vincolo di larghezza massima (max-width) sul tema duplicato:
/* Example max-width constraint for a slide-out drawer on a duplicate theme; the value is only a placeholder, pick one that suits your design */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
.menu-drawer {
max-width: 80vw;
}
}
Quando ritocchi lo stile del pannello, assicurati che tre principi ergonomici restino intatti: che Drawer opens full width sia tenuto sotto controllo, che la parte ombreggiata overlay stays visible resti visibile per consentire la chiusura con un tocco all’esterno, e che sia presente un easy close button chiaramente accessibile in alto. Per i modelli di progettazione dei cassetti, consulta il nostro articolo su mobile drawer menu best practices.
Figure 2: Concept illustration — Side-by-side phone mockups of a full-width Shopify mobile drawer and a partial-width drawer with the page visible behind.
Trade-offs: when code fixes stop being worth it
Modificare direttamente file CSS e Liquid per sanare difetti nel menu mobile può offrire una risposta immediata, ma comporta costi di manutenzione prolungati nel tempo.
In primo luogo, il codice personalizzato spesso va reinserito dopo un aggiornamento. In una discussione sul tema Dawn, un commerciante ha riferito che l’aggiornamento alla versione 11.0 ha risolto il problema del menu, ma che avrebbe dovuto reinserire le proprie modifiche personalizzate (discussione della community Shopify 259424). Dopo l’aggiornamento del tema, ciò che hai aggiunto in file come base.css, main.css o theme.liquid potrebbe dover essere applicato di nuovo.
In secondo luogo, i codici reperiti nei forum sono strettamente legati al singolo tema. Il selettore dell’esempio main.css (.main-menu__disclosure.is-open > .main-menu__content) non ha affinità con quello dell’esempio base.css di Dawn (.menu-opening .menu-drawer). Copiare CSS scritto per un tema in un altro può non fare nulla o causare anomalie grafiche impreviste. Accumulare più patch rende inoltre più difficile la diagnosi.
Tuttavia, ricorrere a un’app non rappresenta sempre la scelta migliore. Vi sono situazioni in cui NON conviene passare a un’app:
- Manca solo una riga di markup: Se il menu si è bloccato perché le prime righe di
theme.liquidsono state rimosse durante l’aggiunta di un tag o di un’app, ripristinare quelle righe può risolvere l’errore senza aggiungere elementi esterni. - Il tema offre già l’impostazione: Se il tema include già comandi nell’Intestazione per gestire la larghezza del cassetto o la visualizzazione dei sottomenu, usare queste funzionalità native è spesso la scelta più semplice.
- Carico di configurazione extra: Ogni applicazione introduce un ulteriore tassello da configurare e monitorare nella gestione della vetrina.
Where Navi+ fits
Se la navigazione mobile nativa del tuo tema è priva delle opzioni di layout di cui hai bisogno, o se preferisci non dover ripristinare codice CSS dopo ogni aggiornamento, Navi+ offre una soluzione diversa.
Navi+ Mobile Menu mette a disposizione un cassetto di navigazione gestito interamente tramite l’interfaccia dell’applicazione:
- Larghezza del cassetto regolabile: Imposta la larghezza del cassetto mobile nelle impostazioni dell’app (i nuovi menu partono da un valore predefinito dell’80%) in modo che non debba occupare l’intero display.
- Modalità di apertura sottomenu personalizzabile: Scegli se i sottomenu scorrono orizzontalmente in un nuovo pannello o si espandono verticalmente sul posto, a fisarmonica.
- Sfondo oscurato e blocco scorrimento: Puoi impostare uno sfondo oscurato e il blocco dello scorrimento della pagina mentre il cassetto è aperto, e i menu supportano fino a tre livelli di navigazione.
- Barra inferiore Tab Bar: Affianca al menu hamburger una barra di navigazione fissa sul fondo dello schermo che resta visibile mentre i clienti navigano.
È opportuno precisare i limiti di applicazione: Navi+ non corregge file di tema corrotti e non ripara il cassetto nativo difettoso del tema. Fornisce un sistema di navigazione separato che subentra al menu del tema quando preferisci non toccare il codice.
If you’ve re-applied the same menu fix after every theme update, you can try building the mobile drawer in Navi+ instead — set the drawer width and submenu style in the app, preview it on your phone, and keep your theme files untouched.
Per stabilire quale modello di navigazione si adatti meglio alle dimensioni del tuo catalogo, consulta le nostre guide su come choose the right menu type e come integrare una bottom tab bar on mobile.
Action checklist after the fix
Dopo aver implementato le modifiche sulla copia del tema, verifica questi 7 requisiti prima di pubblicare il risultato online:
- Apertura e chiusura bidirezionale: Accertati che il cassetto si apra subito al tocco dell’icona hamburger e si richiuda senza intoppi sia tramite la crocetta (
X) sia toccando l’area oscurata circostante. - Espansione dei sottomenu: Tocca ciascuna voce genitore per verificare che le liste secondarie si aprano con fluidità, senza salti visivi o ricaricamenti di pagina indesiderati.
- Dimensioni delle aree touch: Assicurati che collegamenti, frecce di espansione e pulsanti di chiusura rispettino il criterio WCAG 2.2 SC 2.5.8 con un’area minima di almeno 24 x 24 pixel CSS, con alcune eccezioni (standard W3C sulle dimensioni degli elementi).
- Test su dispositivi differenti: Prova il tema sia su un dispositivo iOS (Safari) sia su Android (Chrome) per rilevare particolarità tattili legate al sistema operativo.
- Annotare le modifiche al codice: Tieni nota ordinata di ogni regola CSS o variazione a Liquid inserita, così da poterla riutilizzare prontamente in occasione di futuri aggiornamenti.
- Considerare opzioni di navigazione visibile: Come indicano le ricerche del Nielsen Norman Group: “the hamburger menu is not so universal that everyone knows it or immediately looks for it” (studio NN/g sulla navigazione mobile). Valuta percorsi integrativi consultando la nostra guida su navigation beyond the hamburger menu.
- Pubblicare solo il tema verificato: Rendi attivo il tema duplicato sul negozio solo dopo aver superato tutte le verifiche sopra elencate.
FAQ
Why won’t my Shopify hamburger menu open?
Nella maggioranza dei casi, il cassetto risulta nascosto da una regola CSS prioritaria oppure le righe d’apertura in theme.liquid sono state rimosse durante l’aggiunta di un tag o di uno script. Esamina la console del browser per riscontrare errori JavaScript e disattiva le app aggiunte di recente.
How do I make a submenu open when I tap the parent item?
Nel pannello Shopify in Contenuto > Menu, trascina e fai rientrare le voci figlie sotto la voce genitore corrispondente. Molti temi mostrano la voce genitore come pulsante di espansione; comportamenti diversi richiedono impostazioni del tema o codice CSS.
How many submenu levels does Shopify support?
La navigazione di Shopify supporta una voce di primo livello con un massimo di due livelli di menu a discesa nidificati sottostanti, offrendo una gerarchia totale di tre livelli. Anche il tema attivo della vetrina potrebbe dover essere strutturato per mostrare tutti e tre i livelli.
Will my CSS fix disappear when I update my theme?
Spesso sì. Il codice personalizzato inserito direttamente in file come base.css o main.css di solito va reinserito dopo il passaggio a una nuova versione del tema. Duplica sempre il tema prima di intervenire e conserva una copia scritta delle modifiche.
Why do hover menus misbehave on phones?
Molti schermi touch non permettono di fare hover comodamente; MDN osserva che molti dispositivi mobili emulano l’hover solo con un tocco prolungato scomodo. Quando una regola :hover da desktop si attiva al tocco, un menu a discesa può aprirsi e chiudersi in modo inatteso.
Can I change the width of the mobile drawer?
In base al tema impiegato, puoi spesso regolare la larghezza del cassetto mobile direttamente nell’editor del tema sotto Intestazione. Qualora questa opzione non fosse presente, puoi inserire una regola max-width via CSS o utilizzare un’applicazione di menu dotata di questo controllo.
Sources
- Shopify Help Center: Drop-down menus (help.shopify.com)
- Shopify Help Center: Duplicating themes (help.shopify.com)
- MDN Web Docs: @media (hover) (developer.mozilla.org)
- W3C: WCAG 2.2 Target Size (Minimum) (w3.org)
- Nielsen Norman Group: Mobile Navigation Beyond the Hamburger (nngroup.com)
- fudge.ai: How to Change Mobile Menu Behavior in Shopify (fudge.ai)
- Shopify Community: Why isn’t my online store menu opening on mobile devices? (community.shopify.com)
- Shopify Community: Why is my menu not showing on mobile when I click the hamburger icon? (community.shopify.com)
- Shopify Community: Mobile menu is not working for my store (community.shopify.com)
- Shopify Community: Menu doesn’t work on mobile (community.shopify.com)
- Shopify Community: Why is the mobile menu not functioning on Dawn theme? (community.shopify.com)
- Shopify Community: How to fix a menu opening fully on mobile? (community.shopify.com)
- Shopify Community: Dawn theme header expand without clicking (community.shopify.com)
Esplora gli argomenti
Questa guida rimanda ad articoli mirati — approfondisci ogni tema.