English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Vedi demo Inizia

FAQ

Domanda 1: Come posso impedire al mio Desktop Mega Menu di andare a capo?

Ci sono due situazioni che possono rompere il layout di una barra Desktop Mega Menu: troppi elementi di primo livello, o il sito visualizzato in una finestra più stretta di uno schermo desktop standard. Due impostazioni in Setting → Layout → Desktop risolvono questo — nessun codice richiesto.

Before — too many items wrap to a second line Home Shop Categories Sale Blog About Contact Support ⚠ The second row pushes page content down, and the header height changes unpredictably across screen sizes. After — "Menu overflow navigation" keeps it on one row Home Shop Categories Sale Blog › About Contact Support Items that don't fit (About, Contact, Support...) live behind the arrow button — click to reveal them, without wrapping.

Attiva Show navigation arrows when menu overflows. La barra di primo livello rimane sempre su una sola riga; gli elementi che non si adattano sono nascosti dietro un pulsante freccia › invece di andare a capo. Due campi colore, Button background color e Arrow icon color, ti permettono di personalizzare il pulsante.

Mobile switch breakpoint

Per impostazione predefinita, qualsiasi schermo più stretto di 768px passa l’intero menu alla modalità mobile, anche se c’è ancora spazio per un layout desktop — comune su tablet o finestra del browser ridimensionata. Abbassa il campo Breakpoint (px) per mantenere la barra desktop visibile fino a una larghezza più stretta.

Setting → Layout → Desktop ↔ Mobile switch breakpoint Screen width below which the menu switches to mobile 768 px › Menu overflow navigation Show navigation arrows when the menu overflows Both cards only appear for a Desktop Mega Menu — not Tabbar, FAB, Slide, or Mobile Mega Menu.
Default — fixed at 768px Mobile / Hamburger Desktop Mega Menu 768px After setting Breakpoint = 600 (+ overflow navigation enabled) Mobile / Hamburger Desktop (new range) Desktop Mega Menu 600px 768px The 600–768px range used to be hidden as mobile — it now keeps the desktop layout.

Il nuovo intervallo che si apre (tra il tuo breakpoint e 768px) è più stretto di un desktop standard — attiva anche Menu overflow navigation, in modo che gli elementi di primo livello non vadano a capo in quell’intervallo.

Esempio: breakpoint = 600 con Menu overflow navigation attivato:

Larghezza dello schermo Comportamento
Sotto 600px Menu mobile / hamburger
600px – 768px Desktop Mega Menu, il pulsante freccia mantiene gli elementi su una sola riga
Sopra 768px Desktop Mega Menu, comportamento standard

Queste due impostazioni sono indipendenti e influiscono solo sul Desktop Mega Menu — non su Tabbar, FAB, menu Slide o Mobile Mega Menu.

Domanda 2: Come posso mostrare il mio Desktop Mega Menu come menu Slide su mobile?

A volte vuoi l’approccio classico responsive: crea un Desktop Mega Menu e lascialo collassare automaticamente in un menu Slide (Hamburger) su mobile, invece di creare un menu mobile separato da zero.

Punto di forza
Mantieni solo un menu — la versione desktop. La copia mobile segue automaticamente, senza un secondo albero da mantenere sincronizzato.
Debolezza
Mobile-first è come la navigazione dovrebbe essere progettata oggi — i telefoni portano la maggior parte delle visite e spesso la maggior parte dei ricavi. Un albero spremuto da una barra desktop ampia è davvero desktop-first: troppi tocchi per collegamento, gruppi di stile dropdown che si leggono male come elenco impilato, nessuno spazio per scorciatoie solo mobile.

Per la navigazione principale di un negozio, un menu progettato per mobile fin dall’inizio — un menu Slide, Grid o TabBar dedicato — di solito vale la manutenzione extra.

Via di mezzo: rispecchia il Desktop Mega Menu in un menu Slide con Smart responsive (passaggi sotto), e aggiungi un elemento TabBar che lo apre direttamente. Imposta il campo Link To dell’elemento su open:NaviMenu(SF-xxxxxxxxxx) (Business / Elite) — usando l’ID embed del menu Slide — così i visitatori mobile hanno un punto di accesso diretto dalla barra inferiore, anziché ricorrere a un’icona hamburger nascosta.

Configura Smart responsive

Apri il tuo Desktop Mega Menu → Setting → Mobile → scheda Smart responsive. Incorpora un riferimento live di questo menu in un menu Slide — continui a modificare i contenuti solo qui, e la versione mobile si aggiorna automaticamente.

Desktop Mega Menu — 3 columns Collections Women Dresses Tops Men New in Sale Info Size guide Shipping → Smart responsive Slide menu — flattened to 1 column Collections Dresses Tops New in Sale Size guide Shipping one tap reaches every link
  1. Fai clic su Copy embed item per copiare questo modello di elemento menu.
  2. Incollalo a level 1 di un menu Slide esistente — o creane uno prima se non ne hai uno ancora.

I layout multi-colonna vengono appiattiti automaticamente: le colonne diventano un elenco verticale, i titoli delle colonne vengono eliminati e viene inserita una linea divisoria dove le colonne separate si trovavano in precedenza — in modo che i visitatori raggiungono ogni collegamento con un tocco invece di due.

Una volta incorporato, la scheda mostra This menu already shows on mobile con un collegamento diretto al menu Slide, in modo da poterlo controllare in qualsiasi momento.

Perfeziona la copia mobile
  • Nascondi elementi solo desktop. Apri l’elemento nel Desktop Mega Menu → Visibility → attiva Exclude when embedded. Rimane su desktop e scompare solo dalla copia mobile.
  • Aggiungi elementi solo mobile. Il menu Slide non è limitato a quello che il riferimento porta — aggiungi elementi level-1 regolari proprio accanto a quello incorporato per cose che la barra desktop non ha bisogno: un pulsante call/WhatsApp, orari di negozio, un selezionatore di lingua o collegamenti che normalmente vivono nell’intestazione o nel piè di pagina del tema. Questi vivono direttamente nel menu Slide e non toccano affatto la versione desktop.