Come regolare le dimensioni di un menu in un'app di navigazione: barra delle schede, menu mobile e mega menu su Shopify

Quick Answer: How to Adjust Menu Size in a Navigation App

Apri le impostazioni di design del menu e modifica separatamente cinque elementi: dimensione del testo, altezza delle voci, larghezza del menu o del cassetto, dimensione delle icone e spaziatura delle aree di tocco. Mantieni le aree di tocco di almeno 24 x 24 pixel CSS, controlla su uno smartphone stretto e usa il CSS personalizzato solo quando non esiste un’impostazione.

Per regolare le dimensioni del menu del tuo negozio senza scrivere codice, segui questi cinque passaggi:

1. Seleziona il tipo di menu: Apri la tua app di navigazione e scegli il layout da modificare (barra delle schede inferiore, cassetto mobile o mega menu desktop).
2. Imposta la scala tipografica: Configura la dimensione del testo separatamente per i link principali e le sottovoci per definire una gerarchia visiva nitida.
3. Calibra l’altezza delle righe: Aumenta il padding o imposta un’altezza minima (min-height) per facilitare la selezione con il pollice.
4. Modifica larghezza e icone: Allarga il cassetto laterale o il sottomenu per evitare che i titoli lunghi si spezzino e adatta la misura delle icone.
5. Verifica su uno smartphone stretto: Controlla il menu su un telefono reale o a 320 pixel CSS per valutare leggibilità e comodità tattile.

What “Menu Size” Actually Means: Five Dimensions

Quando un menu appare sbilanciato su smartphone, i commercianti cercano spesso un unico selettore per ingrandirlo o rimpicciolirlo. Nel web design, tuttavia, la “dimensione del menu” non è un singolo parametro. È l’equilibrio di cinque dimensioni geometriche distinte.

Modificare una sola dimensione senza armonizzare le altre spezza l’equilibrio visivo. Ad esempio, ingrandire il testo senza allargare il cassetto laterale provoca il troncamento dei titoli lunghi. Aumentare le icone senza alzare la barra crea una sensazione di schiacciamento verticale.

Queste misurazioni sono espresse in pixel CSS (px). Un pixel CSS è un’unità astratta utilizzata dai browser web. Sui display mobili ad alta densità, un pixel CSS corrisponde a diversi pixel fisici del dispositivo.

Se hai bisogno di modificare anche colori, famiglie di caratteri, effetti hover o ombre, consulta la nostra guida completa su come cambiare colori e caratteri del menu.

Why Theme Menus Often Look Too Small or Too Big on Mobile

Una causa comune di incertezza per gli esercenti Shopify riguarda la suddivisione delle impostazioni di navigazione.

Nella gestione standard di Shopify, i link e la gerarchia delle voci si organizzano in Negozio online > Navigazione. Tuttavia, l’aspetto visivo, i font e il layout responsive del menu mobile vengono configurati esclusivamente nell’Editor del tema (fudge.ai).

Shopify Admin
 ├── Negozio online > Navigazione  --> Gerarchia dei link & URL (Contenuto)
 └── Negozio online > Temi
      └── Editor del tema          --> Layout intestazione & stili visivi (Aspetto)

Molti temi Shopify non hanno un’impostazione dedicata per le dimensioni del cassetto mobile o l’altezza delle righe, quindi le risposte nei forum della community sono spesso frammenti di CSS. Le impostazioni disponibili cambiano da tema a tema: controlla prima l’editor del tuo tema.

Inoltre, i menu orizzontali desktop funzionano in modo radicalmente diverso rispetto alle interfacce touch. Quando i collegamenti desktop collassano in un pulsante hamburger, dimensioni di carattere adatte a un portatile possono apparire minuscole o spropositatamente grandi sullo schermo di uno smartphone. Approfondisci questi vincoli nel nostro articolo sui limiti dei menu dei temi Shopify.

Adjust Tab Bar Size: Icon, Label and Bar Height

Una barra delle schede inferiore fissa i collegamenti principali direttamente a portata di pollice. Se tuttavia la barra è troppo sottile o affollata, toccare con precisione diventa disagevole.

Figura 1: Illustrazione concettuale (Concept illustration) — Adjust Tab Bar Size: Icon, Label and Bar Height

In un’app di navigazione, regoli tre parametri essenziali:

1. Dimensione icona: Il simbolo grafico che rappresenta ogni sezione (Home, Catalogo, Cerca, Carrello).
2. Dimensione testo dell’etichetta: La breve dicitura posizionata sotto o accanto all’icona.
3. Altezza della barra: L’altezza verticale complessiva del contenitore ancorato sul fondo del display.

Se aumenti le icone per renderle più riconoscibili, devi aumentare proporzionalmente l’altezza della barra. Se mantieni l’altezza invariata, elementi grafici e testi risulteranno schiacciati contro i bordi del contenitore.

Usa etichette brevissime: idealmente una singola parola come “Home”, “Cerca” o “Carrello”. Testi troppo lunghi vengono tagliati con puntini di sospensione o si sovrappongono alle schede vicine. Ogni scheda necessita di un’ampia area di tocco. Per approfondire l’ergonomia su dispositivi palmari, consulta la nostra guida su barre di schede e navigazione adatta al pollice.

Adjust Mobile Menu (Drawer) Size: Text, Row Spacing and Width

Il menu a cassetto scorrevole (Drawer) rappresenta lo standard per la navigazione mobile. Poiché struttura i link in una lista verticale, il dimensionamento richiede equilibrio tra grandezza del testo, spaziatura delle righe e larghezza del pannello.

1. Scala del testo multi-livello

Evita di impostare la stessa dimensione per ogni livello. Le categorie primarie (Livello 1) necessitano di un testo più grande per orientare lo sguardo. I sottolivelli (Livelli 2 e 3) devono avere caratteri proporzionalmente più piccoli e un rientro appropriato.

2. Spaziatura delle righe con Min Height e Padding

Quando i link sono troppo vicini verticalmente, l’utente rischia di premere la voce adiacente. Nella tua app, utilizza i controlli Min Height (altezza minima della riga) o Item Padding verticale. L’altezza minima garantisce spazio a sufficienza anche per titoli composti da una sola parola.

3. Larghezza del cassetto (Drawer Width)

La larghezza stabilisce quanta porzione di schermo viene coperta all’apertura del menu. Se il cassetto è troppo stretto, i nomi lunghi delle collezioni andranno a capo su più righe spezzando l’armonia della lista.

Quando aumenti la dimensione del testo, allarga il cassetto per consentire ai titoli più estesi di disporsi su un’unica riga. Esegui sempre il test a 320 pixel CSS di larghezza (W3C Reflow). Per l’architettura dei menu a scomparsa, consulta le nostre best practice per il menu a cassetto mobile.

Adjust Mega Menu Size on Desktop and Mobile: Columns, Headings, Images

Su computer, i mega menu organizzano cataloghi vasti tramite pannelli a discesa suddivisi in colonne. Una corretta regolazione delle dimensioni richiede la gestione della larghezza dei pannelli, delle colonne e delle immagini promozionali.

Sottomenu a colonna singola vs pannelli multi-colonna

Le app distinguono tra elenchi semplici e pannelli estesi:

• Sottomenu a colonna singola: Usa l’impostazione Submenu Width per definire la larghezza del pannello (impostazione della larghezza del sottomenu). Ciò impedisce al menu di restringersi troppo o allargarsi eccessivamente.
• Pannelli multi-colonna a espansione completa: Per cataloghi complessi, calibra la larghezza totale per garantire ampi margini tra le varie colonne merceologiche.

Dimensioni del Mega Menu
 ├── Larghezza sottomenu (Dropdown a colonna singola)
 ├── Larghezza a piena espansione (Layout multi-colonna)
 ├── Intestazioni di colonna (Gerarchia visiva superiore ai sottolink)
 └── Immagini di categoria (Larghezza controllata per evitare overflow)

Gerarchia tra intestazioni e sottolink

Nei layout a più colonne, le intestazioni guidano la scansione visiva. Rendi le intestazioni visibilmente più grandi e marcate rispetto ai sottolink per facilitare l’esplorazione del catalogo.

Gestire le immagini promozionali di categoria

Molti mega menu includono banner o immagini di prodotto. Gli elementi grafici occupano molto spazio orizzontale. Se il pannello appare compresso, ridimensiona e vincola le immagini prima di allargare l’intero contenitore oltre la larghezza dello schermo.

Gli schermi mobili sono molto più stretti dei pannelli desktop: controlla la versione mobile di un mega menu separatamente da quella desktop, invece di dare per scontato che le misure desktop valgano anche lì.

Pick a Size That Works for Thumbs: Tap Targets and Readability

Non affidarti al caso quando stabilisci le dimensioni del menu. Le normative di accessibilità e la ricerca ergonomica offrono riferimenti collaudati per aree di tocco e leggibilità.

Secondo le Web Content Accessibility Guidelines (WCAG 2.2) del W3C, il Criterio di Successo 2.5.8 (Target Size Minimum, Livello AA) stabilisce che i target di puntamento debbano misurare almeno 24 by 24 CSS pixels, salvo deroghe specifiche (W3C Target Size Minimum).

Per un’ergonomia touchscreen avanzata, il Criterio 2.5.5 (Target Size Enhanced, Livello AAA) specifica una misura di almeno 44 by 44 CSS pixels (W3C Target Size Enhanced). Il W3C raccomanda di raggiungere queste dimensioni minime a prescindere dallo spazio circostante sui collegamenti principali.

Ricerche del Nielsen Norman Group confermano questi parametri: la dimensione fisica minima di un target di tocco dovrebbe attestarsi intorno a 1cm by 1cm (0.4in by 0.4in) (NN/g Touch Target Size). NN/g evidenzia inoltre che gli elementi interattivi devono prima essere abbastanza grandi e solo dopo adeguatamente distanziati.

In aggiunta, il criterio WCAG 1.4.4 (Resize Text) prescrive che il testo possa essere ingrandito fino al 200 % senza ausili esterni e senza perdita di contenuto o funzionalità (W3C Resize Text). Trovi maggiori dettagli nella nostra guida all’accessibilità della navigazione.

Test on a narrow screen and at larger text

La conformità richiede verifiche su schermi di dimensioni ridotte. Secondo il criterio WCAG 1.4.10 (Reflow), i contenuti a scorrimento verticale devono funzionare senza problemi a una larghezza equivalente a 320 CSS pixels senza richiedere scorrimento orizzontale (W3C Reflow).

Per testare il menu:

• Apri gli strumenti per sviluppatori del browser e imposta la larghezza a 320 pixel CSS.
• Apri il cassetto ed espandi i sottomenu per accertarti che i testi non sbordino orizzontalmente.
• Aumenta l’ingrandimento del testo di sistema per verificare che le aree di tocco e i caratteri restino agevoli.

When You Still Need Custom CSS (and How to Test It Safely)

La maggior parte delle modifiche dimensionali può essere gestita tramite i comandi visivi dell’app di navigazione. Se tuttavia il tema impone stili rigidi o manca una regolazione specifica, il ricorso a CSS personalizzato può rendersi utile.

Tieni a mente le regole dell’ecosistema Shopify:

• Ambito a livello di tema: Il codice CSS aggiunto nelle impostazioni del tema ha effetto su tutte le pagine del negozio online, tranne la schermata di checkout (Shopify Adding Custom CSS).
• Limite di caratteri: Shopify limita il campo CSS globale a 1500 caratteri (Shopify Adding Custom CSS).
• Backup del tema: Shopify consiglia esplicitamente di duplicare il tema prima di modificare codice o fogli di stile (Shopify Duplicating Themes), consentendo di ripristinare la versione precedente in caso di anomalie.
• Variabilità delle classi: Le classi CSS variano sensibilmente tra i diversi temi Shopify. Copiare codice da forum esterni senza verificare i selettori causa frequentemente incompatibilità visive.

Guarda questo video dimostrativo su come modificare la dimensione del font del menu in Shopify:

Video: Una dimostrazione per modificare la dimensione del carattere del menu in un tema Shopify.

Troubleshooting: Size Not Changing, Text Cut Off or Wrapping

Nel ridimensionare la navigazione, possono verificarsi tre problemi comuni:

1. Le modifiche alle dimensioni non si vedono

• Livello errato selezionato: Controlla se hai modificato il Livello 1 o i Livelli secondari 2/3. Modificare il Livello 1 non altera i sottomenu se questi hanno opzioni separate.
• Profilo del dispositivo: Assicurati di operare sulla vista corretta. Modificare i valori per desktop non influenza la visualizzazione su smartphone.
• Cache del browser: I browser memorizzano i fogli di stile. Verifica il negozio in una scheda di navigazione in incognito.
• Regole del tema prevalenti: I selettori del tema possono avere una specificità più alta. Ispeziona l’elemento per vedere quale regola ha la priorità.

2. Testo del menu tagliato (Troncamento)

Come evidenziato dal W3C, le parole troppo estese per lo spazio orizzontale a disposizione finiscono per essere troncate (W3C Resize Text).

Come rimediare:

• Allargare il contenitore: Aumenta la larghezza del cassetto o del sottomenu.
• Moderare la grandezza del testo: Riduci leggermente la dimensione del font.
• Accorciare i titoli: Sostituisci diciture prolisse con termini più sintetici.

3. Ritorno a capo su due righe vs puntini di sospensione

Secondo MDN Web Docs, la visualizzazione dei puntini di sospensione (...) richiede l’uso combinato di text-overflow: ellipsis, overflow: hidden e white-space: nowrap (MDN text-overflow).

Se il testo va a capo senza puntini, si tratta del normale comportamento di ritorno a capo. Non è un errore: visualizzare il testo su due righe è spesso preferibile al taglio delle parole, a patto che l’altezza della riga contenga comodamente entrambe le righe.

Figura 3: Illustrazione concettuale — Confronto tra etichette tagliate con puntini in un cassetto stretto e titoli disposti su un’unica riga in un cassetto allargato.

Trade-offs: What Resizing Cannot Fix

Regolare le dimensioni migliora leggibilità e tocco, ma comporta compromessi progettuali inevitabili:

• Riduzione della densità informativa: Testi più grandi e righe più alte facilitano la selezione, ma diminuiscono il numero di voci visibili a schermo. I visitatori dovranno scorrere di più.
• Cataloghi sovraffollati non migliorano rimpicciolendo i caratteri: Se il menu accumula decine di collezioni disordinate, rimpicciolire il testo non lo renderà accessibile. Creerà solo un blocco fitto e indecifrabile. I menu sovraccarichi richiedono pulizia di catalogo, non caratteri microscopici.
• Perdita dello sfondo del negozio: Un cassetto mobile a tutta larghezza evita tagli di testo ma copre interamente il negozio. Preservare una striscia di sfondo visibile aiuta l’acquirente a mantenere l’orientamento.
• Differenze ergonomiche desktop vs mobile: Dimensioni adatte a uno schermo orizzontale falliscono spesso su touch screen verticali. Valuta sempre ogni misura separatamente sui due dispositivi.

Where Navi+ Fits

Se il tuo tema Shopify non dispone di controlli dedicati per la larghezza del cassetto mobile o la barra inferiore, Navi+ Tab Bar & Mega Menu offre regolazioni visive per Tab Bar, Mobile Menu e Mega Menu.

Funzionalità verificate nell’app:

• Tipografia per livello: Imposta Font Size (in px) separatamente per le voci primarie (Livello 1) e le sottocategorie (Livello 2 e 3) (impostazioni di progettazione di livello 1 di Navi+).
• Altezza riga e spaziatura: Configura Min Height (in px) e calibra Item Padding verticale per garantire selezioni comode (impostazioni di progettazione di livello 1 di Navi+).
• Dimensioni icone: Regola Icon Size (in px) per i simboli di navigazione su tutti i livelli (impostazioni di progettazione di livello 1 di Navi+).
• Larghezza sottomenu e pannelli: Imposta Submenu Width nei dropdown a colonna singola (impostazione della larghezza del sottomenu) e la larghezza estesa nei mega menu.
• Dimensioni contenitore dedicate: Imposta l’altezza della barra delle schede inferiore e la larghezza del cassetto mobile (su mobile e su desktop).
• Sintassi reattiva combinata: I campi di spaziatura supportano la formula mobile | desktop per definire valori diversi in una sola casella.
• Struttura chiara a 3 livelli: Supporta fino a 3 livelli gerarchici per preservare un’esperienza intuitiva e ordinata.

Se il tuo tema non ha alcuna impostazione per la larghezza del cassetto o l’altezza della barra delle schede, Navi+ Tab Bar & Mega Menu ti permette di impostare dimensione del testo, altezza delle voci, dimensione delle icone e larghezza del menu per ogni livello, con anteprima prima della pubblicazione. Provalo prima su un tema duplicato.

Action Checklist

Utilizza questa lista in 8 punti per verificare e collaudare il menu prima della pubblicazione:

• Duplicare il tema: Crea una copia di sicurezza del tema attivo prima di modificare codice o CSS (Shopify Duplicating Themes).
• Configurare il testo per livello: Assegna dimensioni di carattere distinte a categorie primarie e secondarie.
• Fissare l’altezza minima di riga: Imposta padding o altezza minima per favorire un tocco privo di errori.
• Calibrare la larghezza del contenitore: Allarga il cassetto o il sottomenu per contenere i titoli di collezione più estesi.
• Equilibrare le icone: Scala la dimensione delle icone in proporzione all’altezza del contenitore.
• Verificare i target di tocco: Assicurati che tutti gli elementi cliccabili misurino almeno 24×24 pixel CSS (W3C Target Size Minimum).
• Testare a 320 pixel CSS: Controlla la visualizzazione mobile a 320 pixel CSS senza scorrimento orizzontale (W3C Reflow).
• Verificare l’assenza di tagli con zoom: Ispeziona i titoli al 200% di ingrandimento per prevenire troncamenti anomali (W3C Resize Text).

FAQ

How do I make the mobile menu text bigger without code?

Sfrutta le opzioni visive per il carattere integrate nel tuo tema o nella tua app di navigazione. Sebbene molti temi Shopify richiedano modifiche al codice CSS (fudge.ai), un’app come Navi+ offre un’impostazione della dimensione del carattere per ciascun livello di menu (impostazioni di progettazione di livello 1 di Navi+).

How wide should a mobile menu drawer be?

Non esiste una misura fissa prestabilita. Il cassetto deve lasciare visibile una porzione dello store per non disorientare il cliente, garantendo al contempo spazio a sufficienza per non troncare i testi su schermi da 320 pixel CSS (W3C Reflow).

How big should menu tap targets be?

In base alle linee guida WCAG 2.2 AA, i target per puntatore devono misurare almeno 24 per 24 pixel CSS (W3C Target Size Minimum), mentre il livello AAA suggerisce 44 per 44 pixel CSS (W3C Target Size Enhanced). Il Nielsen Norman Group consiglia una dimensione fisica di circa 1cm per 1cm (NN/g Touch Target Size).

Why is my menu text cut off?

Il testo del menu viene tagliato quando i titoli superano lo spazio orizzontale disponibile nel contenitore (W3C Resize Text). Puoi risolvere allargando il cassetto o il sottomenu, riducendo leggermente il carattere o sintetizzando le etichette.

Do I need to duplicate my theme before adding CSS?

Sì. Shopify consiglia espressamente di creare una copia di backup del tema prima di intervenire su codice o fogli di stile, in modo da poter annullare qualsiasi modifica imprevista (Shopify Duplicating Themes).

Sources

• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Criterio 2.5.8 sulla dimensione minima delle aree di tocco (Livello AA).
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Enhanced) — Criterio 2.5.5 sulla dimensione ottimale dei target (Livello AAA).
• W3C Web Accessibility Initiative: WCAG 2.2 Resize Text — Criterio 1.4.4 sul ridimensionamento del testo fino al 200%.
• W3C Web Accessibility Initiative: WCAG 2.2 Reflow — Criterio 1.4.10 sul reflow a 320 pixel CSS.
• Nielsen Norman Group: Touch Target Sizes on Mobile Devices — Ricerca di Aurora Harley sulle dimensioni fisiche dei target mobili.
• Shopify Help Center: Duplicating Themes — Guida alla duplicazione dei temi prima della modifica del codice.
• Shopify Help Center: Adding Custom CSS to Themes — Documentazione sull’ambito di applicazione e i limiti di caratteri del CSS.
• fudge.ai: How to Change the Mobile Menu in Shopify — Guida alla configurazione del menu mobile nell’Editor del tema.
• MDN Web Docs: text-overflow CSS Reference — Riferimento tecnico sulle proprietà text-overflow, overflow e white-space.
• Navi+ Help Center: Level 1 Design Settings — Documentazione su Font Size, Icon Size, Min Height e padding.
• Navi+ Help Center: Layout Settings — Documentazione sulla larghezza dei sottomenu e mega menu.