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

FAQ

Pergunta 1: Como faço para impedir que meu Menu Mega Desktop quebre em uma segunda linha?

Existem duas situações que podem quebrar o layout de uma barra de Menu Mega desktop: muitos itens de nível superior ou o site visualizado em uma janela mais estreita que um desktop padrão. Duas configurações em Setting → Layout → Desktop resolvem isso — nenhum código necessário.

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.

Ative Show navigation arrows when menu overflows. A barra de nível superior sempre permanece em uma linha; os itens que não se encaixam ficam atrás de um botão de seta › em vez de quebrarem para a próxima linha. Dois campos de cor, Button background color e Arrow icon color, permitem que você estilize o botão.

Ponto de quebra de alteração para mobile

Por padrão, qualquer tela mais estreita que 768px alterna todo o menu para modo mobile, mesmo que ainda haja espaço suficiente para um layout desktop — comum em tablets ou uma janela do navegador redimensionada. Reduza o campo Breakpoint (px) para manter a barra desktop visível até uma largura menor.

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.

O novo intervalo que isso abre (entre seu ponto de quebra e 768px) é mais estreito que um desktop padrão — ative também a navegação de overflow do menu, para que os itens de nível superior não se quebrem nesse intervalo.

Exemplo: ponto de quebra = 600 com navegação de overflow do menu ativada:

Largura da tela Comportamento
Abaixo de 600px Mobile / menu de hambúrguer
600px – 768px Menu Mega Desktop, botão de seta mantém os itens em uma linha
Acima de 768px Menu Mega Desktop, comportamento padrão

Essas duas configurações são independentes e afetam apenas o Menu Mega Desktop — não o Tabbar, FAB, menu Slide ou Mobile Mega Menu.

Pergunta 2: Como posso exibir meu Menu Mega Desktop como um menu Slide no mobile?

Às vezes você quer a abordagem responsiva clássica: construir um Menu Mega Desktop e deixá-lo se colapsar em um menu Slide (Hamburger) no mobile automaticamente, em vez de construir um menu mobile separado do zero.

Ponto forte
Você mantém apenas um menu — a versão desktop. A cópia mobile acompanha automaticamente, sem uma segunda árvore para manter sincronizada.
Ponto fraco
Mobile-first é como a navegação deve ser projetada hoje — celulares trazem a maioria das visitas e frequentemente a maioria da receita. Uma árvore espremida de uma barra desktop ampla é realmente desktop-first: muitos toques por link, grupos de estilo dropdown que leem mal como uma lista empilhada, sem espaço para atalhos apenas para mobile.

Para a navegação principal de uma loja, um menu projetado para mobile desde o início — um menu Slide, Grid ou TabBar dedicado — geralmente vale a pena o esforço adicional de manutenção.

Caminho do meio: espelhe o Menu Mega Desktop em um menu Slide com Smart responsive (etapas abaixo) e adicione um item TabBar que o abre diretamente. Defina o campo Link To do item como open:NaviMenu(SF-xxxxxxxxxx) (Business / Elite) — usando o ID de incorporação do menu Slide — para que os visitantes mobile recebam um ponto de entrada real na barra inferior em vez de um ícone de hambúrguer oculto.

Configurar responsivo inteligente

Abra seu Menu Mega Desktop → Setting → Mobile → card Smart responsive. Ele incorpora uma referência ativa deste menu em um menu Slide — você continua editando conteúdo apenas aqui, e a versão mobile se atualiza 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. Clique em Copy embed item para copiar este modelo de item de menu.
  2. Cole-o em level 1 de um menu Slide existente — ou crie um primeiro se você não tiver um ainda.

Os layouts multi-coluna são achatados automaticamente: as colunas se tornam uma lista vertical, os títulos das colunas são removidos e uma linha divisória é inserida onde as colunas separadas costumavam estar — para que os visitantes alcancem cada link em um toque em vez de dois.

Uma vez incorporado, o card mostra This menu already shows on mobile com um link direto para o menu Slide, para que você possa verificá-lo a qualquer momento.

Ajustar a cópia mobile
  • Ocultar itens apenas para desktop. Abra o item no Menu Mega Desktop → Visibility → ative Exclude when embedded. Ele permanece no desktop e desaparece apenas da cópia mobile.
  • Adicionar itens apenas para mobile. O menu Slide não se limita ao que a referência traz — adicione itens regulares de nível 1 ao lado do incorporado para coisas que a barra desktop não precisa: um botão de chamada/WhatsApp, horário da loja, um alternador de idioma ou links que normalmente vivem no cabeçalho ou rodapé do tema. Estes vivem diretamente no menu Slide e não tocam na versão desktop.