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

FAQ

Pregunta 1: ¿Cómo evito que mi Menú Mega Desktop se envuelva en una segunda línea?

Hay dos situaciones que pueden romper la maquetación de una barra de Menú Mega de escritorio: demasiados elementos de nivel superior, o el sitio visto en una ventana más estrecha que un escritorio estándar. Dos configuraciones bajo Setting → Layout → Desktop solucionan esto — sin código requerido.

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.

Activa Show navigation arrows when menu overflows. La barra de nivel superior siempre permanece en una fila; los elementos que no caben se ocultan detrás de un botón de flecha › en lugar de envolverse. Dos campos de color, Button background color y Arrow icon color, te permiten personalizar el botón.

Punto de ruptura del cambio a móvil

De forma predeterminada, cualquier pantalla más estrecha que 768px cambia todo el menú al modo móvil, incluso si aún hay espacio suficiente para una maquetación de escritorio — común en tablets o una ventana de navegador redimensionada. Reduce el campo Breakpoint (px) para mantener la barra de escritorio visible hasta un ancho más estrecho.

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.

El nuevo rango que esto abre (entre tu punto de ruptura y 768px) es más estrecho que un escritorio estándar — activa también la navegación de desbordamiento de menú, para que los elementos de nivel superior no se envuelvan en ese rango.

Ejemplo: punto de ruptura = 600 con navegación de desbordamiento de menú activada:

Ancho de pantalla Comportamiento
Menos de 600px Menú móvil / hamburguesa
600px – 768px Menú Mega Desktop, botón de flecha mantiene elementos en una fila
Más de 768px Menú Mega Desktop, comportamiento estándar

Estas dos configuraciones son independientes y solo afectan al Menú Mega Desktop — no al Tabbar, FAB, menú Slide o Menú Mega Móvil.

Pregunta 2: ¿Cómo puedo mostrar mi Menú Mega Desktop como menú Slide en móvil?

A veces deseas el enfoque clásico de respuesta: construir un Menú Mega Desktop y dejar que se contraiga automáticamente en un menú Slide (Hamburguesa) en móvil, en lugar de construir un menú móvil separado desde cero.

Fortaleza
Solo mantienes un menú — la versión de escritorio. La copia móvil lo sigue automáticamente, sin un segundo árbol que mantener sincronizado.
Debilidad
Móvil primero es cómo la navegación debe diseñarse hoy — los teléfonos traen la mayoría de visitas y a menudo la mayoría de ingresos. Un árbol comprimido desde una barra de escritorio ancha es realmente escritorio primero: demasiados toques por enlace, grupos de estilo desplegable que leen mal como lista apilada, sin espacio para atajos solo móviles.

Para la navegación principal de una tienda, un menú diseñado para móvil desde el principio — un menú Slide, Grid o TabBar dedicado — generalmente vale el mantenimiento extra.

Término medio: refleja el Menú Mega Desktop en un menú Slide con Smart responsive (pasos abajo), y añade un elemento TabBar que lo abra directamente. Establece el campo Link To del elemento en open:NaviMenu(SF-xxxxxxxxxx) (Business / Elite) — usando el ID de incrustación del menú Slide — para que los visitantes móviles obtengan un punto de entrada real en la barra inferior en lugar de un icono de hamburguesa oculto.

Configurar Smart responsive

Abre tu Menú Mega Desktop → Setting → Mobile → tarjeta Smart responsive. Incrusta una referencia activa de este menú en un menú Slide — solo mantienes editando contenido aquí, y la versión móvil se actualiza automáticamente.

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. Haz clic en Copy embed item para copiar esta plantilla de elemento de menú.
  2. Pégala en level 1 de un menú Slide existente — o crea uno primero si aún no tienes uno.

Los diseños de múltiples columnas se aplanan automáticamente: las columnas se convierten en una lista vertical, los títulos de columnas se eliminan, y se inserta una línea divisoria donde solían estar las columnas separadas — para que los visitantes lleguen a cada enlace en un toque en lugar de dos.

Una vez incrustado, la tarjeta muestra This menu already shows on mobile con un enlace directo al menú Slide, para que puedas verificarlo en cualquier momento.

Ajustar la copia móvil
  • Ocultar elementos solo de escritorio. Abre el elemento en el Menú Mega Desktop → Visibility → activa Exclude when embedded. Se mantiene en escritorio y desaparece solo de la copia móvil.
  • Añadir elementos solo móviles. El menú Slide no está limitado a lo que la referencia trae — añade elementos regulares de nivel 1 directamente al lado del incrustado para cosas que la barra de escritorio no necesita: un botón de llamada/WhatsApp, horario de tienda, un selector de idioma, o enlaces que normalmente viven en el encabezado o pie del tema. Estos viven directamente en el menú Slide y no tocan la versión de escritorio en absoluto.