Abres tu tienda Shopify en el móvil, tocas el icono de tres líneas (hamburguesa) para explorar una colección y no ocurre nada. O quizás el panel se abre un instante y se cierra al segundo, o tus categorías principales se muestran pero los submenús se niegan a desplegarse. Si los compradores no pueden abrir el menú de navegación en el móvil, explorar tu tienda se vuelve mucho más difícil.
- Tres Orígenes Claros: «El menú no se abre» puede significar un panel oculto por CSS o por un marcado de tema dañado, una regla de hover que choca con las pantallas táctiles, o submenús que no están anidados en el panel de control.
- La Seguridad Primero: Duplica siempre tu tema antes de editar código y realiza las comprobaciones en un teléfono físico en lugar de confiar solo en el navegador del ordenador.
- Mantenimiento a Largo Plazo: El código CSS modificado a mano suele perderse con cada actualización de tema. Las aplicaciones dedicadas de navegación evitan tener que rehacer cambios técnicos constantemente.
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.
Esta guía está diseñada para temas de Shopify; los menús en WordPress o Wix operan de forma distinta. Revisa en orden las causas potenciales que detallamos a continuación sobre un tema duplicado, protegiendo así tu tienda en vivo mientras haces las pruebas.
Three different problems: menu won’t open, opens the wrong way, submenu won’t expand
Cuando los comerciantes comentan que su menú móvil no funciona, describen uno de cinco síntomas habituales. Antes de modificar configuraciones o tocar código, identifica cuál describe tu caso:
| Síntoma | Causa probable | Dónde solucionarlo |
|---|---|---|
| El icono de hamburguesa no hace nada | Panel lateral oculto por CSS o código de tema dañado | Revisar panel oculto y código de tema |
| Abre y cierra al instante / parpadea al tocar | Desplegable basado en ratón en conflicto con toque táctil | Cambiar a apertura por toque |
| Los elementos del submenú no aparecen | Enlaces no anidados en Contenido > Menús o tema colapsado | Revisar anidación de menús y ajustes |
| El panel lateral cubre toda la pantalla | Estilo o ajuste de ancho del panel lateral en el tema | Ajustar anchura y estilo del menú |
| Funciona en ordenador pero no en móvil | Ajustes de cabecera móvil configurados por separado | Revisar ajustes de cabecera móvil y estilo del drawer |
Cada síntoma pertenece a una capa técnica distinta. Un icono que no responde puede indicar un fallo en JavaScript o un panel lateral oculto por CSS. Por el contrario, un submenú que parpadea puede deberse a reglas hover pensadas para el ratón que se comportan de forma extraña al tocar. Recuerda que las cabeceras móvil y de escritorio se configuran de manera independiente en algunos temas.
Before you edit code: duplicate your theme and test on a real phone
Antes de alterar los archivos de plantilla o los estilos de tu tienda, toma dos precauciones esenciales para salvaguardar tu negocio.
Primero, genera una copia de seguridad de tu tema activo. Tal como indica la guía de duplicación de temas de 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.” En el panel de control de Shopify, dirígete a Tienda online > Temas, haz clic en los tres puntos (...) junto a tu tema actual y selecciona Duplicar. Realiza cualquier prueba de código exclusivamente en esa copia.
Segundo, prueba la navegación en un teléfono real. El modo adaptable de las herramientas de desarrollo de escritorio resulta útil, pero no equivale a un teléfono real. Shopify recomienda expresamente probar menús en dispositivos móviles para verificar que los menús desplegables se expandan según lo previsto. Un dispositivo físico puede mostrar problemas táctiles que los emuladores de escritorio quizá pasen por alto.
Anota también las aplicaciones o scripts instalados recientemente. Las etiquetas de analítica, Google Tag Manager o constructores visuales pueden añadir scripts que quizá interfieran con la navegación. Revisa primero el editor de temas, ya que el comportamiento del menú móvil suele controlarse en el editor de temas bajo la sección de Cabecera en muchos temas.
Hamburger icon does nothing: hidden drawer CSS and broken theme.liquid
Cuando al pulsar el icono de hamburguesa no se produce ninguna respuesta, la tienda suele experimentar un error de JavaScript que frena el evento de apertura, o una regla CSS que mantiene el panel en un estado invisible.
Check the browser console and recent apps
Comienza inspeccionando la consola de scripts. Conecta tu teléfono al ordenador mediante depuración USB o abre tu tienda en un navegador de escritorio ajustado a ancho móvil y activa las herramientas de desarrollo (F12 o clic derecho > Inspeccionar).
Selecciona la pestaña Console y pulsa el botón de hamburguesa. Busca mensajes de error en color rojo como Uncaught TypeError o SyntaxError. Un fallo no controlado en JavaScript puede detener el resto de ese script, lo que puede impedir que el script de apertura del tema se ejecute. Si el error proviene de una aplicación externa o una etiqueta insertada recientemente, desactiva temporalmente el bloque en Tienda online > Temas > Personalizar > Incrustaciones de aplicaciones para comprobar si el menú recupera su función.
Restore the top lines of theme.liquid
Si la consola muestra errores globales en toda la página, revisa la plantilla raíz del tema. El archivo layout/theme.liquid contiene la estructura HTML de nivel superior de la página en la que se apoyan los scripts del tema.
En un caso expuesto en la comunidad de Shopify, el menú móvil de una tienda dejó de funcionar después de que se eliminaran las dos primeras líneas de theme.liquid mientras alguien añadía una etiqueta de Google Tag Manager. Es una causa probable señalada por el propietario de una tienda y no una solución confirmada oficialmente, pero muestra por qué conviene revisar si faltan líneas al inicio del archivo. Entra en Tienda online > Temas > … > Editar código, abre layout/theme.liquid y compara las primeras líneas con una copia sin editar del mismo tema para detectar lo que se haya eliminado.
A CSS rule that forces the drawer visible (last resort)
En ciertas ocasiones, el código JavaScript activa el menú correctamente, pero el código CSS lo mantiene fuera de la pantalla o con visibilidad oculta.
Por ejemplo, en un debate de la comunidad de Shopify sobre el tema Dawn, un usuario solucionó la invisibilidad de su panel añadiendo una regla en 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;
}
}
En otro caso relativo a un tema diferente, un propietario confirmó que el menú funcionó tras incorporar visibility: visible a su declaración de menú en main.css (hilo 389597 de la comunidad de Shopify):
/* 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;
}
Asimismo, a otro usuario le resultó útil una regla orientada a etiquetas details abiertas como .js details[open] > .menu-drawer (hilo 395768 de la comunidad de Shopify).
Interpreta estos ejemplos de CSS únicamente como casos reales reportados en versiones específicas de temas, nunca como un parche universal. Los selectores difieren notablemente entre temas. Además, imponer visibilidad mediante CSS solo oculta el síntoma si el fallo real reside en un problema de código o etiquetas incompletas. Recuerda estas tres referencias clave: visibility hidden, broken theme.liquid, y 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
Si el menú en tu smartphone se abre un instante y se cierra de inmediato, o si los submenús parpadean al pulsar una categoría, una causa frecuente es una regla hover pensada para escritorio.
Según define MDN Web Docs, la consulta @media (hover: none) describe entornos donde “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)” (documentación de MDN sobre hover). Por el contrario, @media (hover: hover) se aplica cuando “the primary input mechanism can conveniently hover over elements.”
Cuando estilos personalizados o del tema de escritorio asignan la apertura del submenú al estado :hover sin comprobar las capacidades del dispositivo, las pantallas táctiles pueden intentar simular el paso del ratón. Como resultado, un desplegable puede abrirse y cerrarse al instante al tocar, o el toque puede no comportarse como espera la regla hover.
Para evitar esta colisión, haz que los submenús abran al tocar reservando las declaraciones hover solo para dispositivos con puntero real:
/* 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;
}
}
Al envolver el código hover en @media (hover: hover), teléfonos y tabletas recurren a la apertura táctil nativa del tema. Abrir un submenú al pasar el dedo es complicado en cabeceras táctiles: en un debate de la comunidad de Shopify sobre Dawn, un colaborador escribió que no veía forma de hacerlo solo con CSS; probablemente haga falta JavaScript o mantener el comportamiento por defecto del tema.
Submenus that should expand: nesting, theme settings, and CSS
Cuando los enlaces primarios se muestran en el panel móvil pero los elementos secundarios no se despliegan, el motivo suele ser organizativo y no un fallo de código.
Verifica en primer lugar la estructura en el panel de control de Shopify, dentro de Contenido > Menús. Como señala la documentación de menús desplegables de Shopify: “You can build drop-down menus by creating or moving menu items so that they’re nested below a top-level item.” Cada elemento secundario debe anidarse bajo el elemento principal en el editor de menús; un elemento que no esté anidado sigue siendo un elemento de nivel superior.
Shopify establece además un límite concreto de profundidad: “The top-level item can have up to two levels of nested drop-down menus.” Esto posibilita tres niveles en total:
- Elemento de primer nivel (p. ej., Ropa)
- Primer nivel de submenú anidado (p. ej., Mujer)
- Segundo nivel de submenú anidado (p. ej., Chaquetas)
En dispositivos móviles, muchos temas configuran los elementos principales que contienen enlaces como botones de despliegue y no como enlaces de destino. Tocar el título principal abre la lista anidada en lugar de recargar la página. Si necesitas que los compradores puedan acceder a la colección padre, añade un enlace específico (como “Ver todo”) en lo alto del submenú.
Si la jerarquía en el administrador es correcta pero los submenús siguen sin expandirse en móvil, tu tema puede requerir ajustes de diseño. Shopify advierte que “some themes might require CSS adjustments to improve mobile usability.” Si introduces reglas CSS, asegúrate de restringirlas estrictamente a consultas para móvil (como @media (max-width: 749px)) y dirigirlas únicamente a las clases del panel para no alterar el diseño de escritorio. Si deseas conocer más sobre estructura y enlaces, consulta nuestra Shopify menu guide completa.
Drawer opens full width or the wrong style
En ocasiones el menú móvil se abre, pero de una forma que perjudica la usabilidad. Algunos comerciantes comprueban que el panel lateral cubre toda la pantalla del teléfono y oculta la tienda que hay detrás.
En debates entre comerciantes, algunos dicen que prefieren un panel lateral que no ocupe toda la pantalla (hilo 275308 de la comunidad de Shopify). Un panel que cubre el dispositivo de borde a borde oculta la página de detrás; una franja atenuada todavía visible puede dejar más claro que el panel se puede cerrar.
Antes de editar código, comprueba los ajustes de tu tema. En muchos temas actuales de Shopify, el comportamiento del menú móvil se controla en el editor de temas dentro del apartado Cabecera. Algunos temas también permiten configurar la cabecera de forma independiente para móvil y escritorio.
Si tu tema no dispone de un control de anchura para el panel lateral, puedes probar a limitar el ancho máximo (max-width) en tu tema duplicado:
/* 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;
}
}
Al modificar el diseño del panel, asegúrate de cuidar tres puntos: que la situación Drawer opens full width quede controlada, que el fondo oscurecido overlay stays visible siga a la vista para salir con un toque, y que un easy close button permanezca visible arriba. Para conocer patrones de diseño de paneles laterales, revisa nuestra guía de 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
Modificar archivos CSS y Liquid para resolver incidencias en el menú móvil puede dar respuesta a un problema urgente, pero obliga a valorar el esfuerzo continuo de mantenimiento.
En primer lugar, el código personalizado a menudo hay que volver a añadirlo tras una actualización. En un debate sobre el tema Dawn, un usuario explicó que actualizar a la versión 11.0 solucionó su problema de menú, pero tendría que volver a añadir sus cambios personalizados (hilo 259424 de la comunidad de Shopify). Tras actualizar el tema, lo que añadiste en archivos como base.css, main.css o theme.liquid puede tener que aplicarse de nuevo.
En segundo lugar, los fragmentos extraídos de foros dependen mucho del tema. El selector del ejemplo de main.css (.main-menu__disclosure.is-open > .main-menu__content) no guarda relación con el del ejemplo de base.css de Dawn (.menu-opening .menu-drawer). Copiar CSS pensado para un tema en otro puede no hacer nada o provocar fallos visuales imprevistos. Acumular varios parches dificulta además el diagnóstico.
Con todo, una aplicación no siempre es necesaria. Hay situaciones donde NO conviene pasar a una app:
- Solo falta una línea de código: Si el menú dejó de funcionar porque se eliminaron las primeras líneas de
theme.liquidal añadir una etiqueta o una aplicación, reponer esas líneas puede resolver el fallo de forma limpia. - El tema ya ofrece la opción: Si tu tema ya incluye controles en la Cabecera para ajustar el ancho o el estilo de los submenús, utilizar esas opciones nativas suele ser lo más sencillo.
- Carga de configuración adicional: Instalar una aplicación suma otro elemento más que debes gestionar en el día a día de la tienda.
Where Navi+ fits
Si la navegación móvil nativa de tu tema carece de las opciones de diseño que necesitas, o si estás cansado de reincorporar código CSS tras cada actualización, Navi+ plantea una alternativa directa.
Navi+ Mobile Menu ofrece un menú lateral exclusivo administrado íntegramente desde la interfaz de la aplicación:
- Anchura a medida: Define el ancho del panel lateral móvil en los ajustes de la aplicación (los menús nuevos parten de un valor predefinido del 80 %) para que no tenga que ocupar la pantalla de lado a lado.
- Múltiples formatos de submenú: Decide si los niveles anidados se deslizan horizontalmente hacia un nuevo panel o se abren verticalmente en el sitio, en acordeón.
- Fondo atenuado y bloqueo de desplazamiento: Puedes configurar un fondo sombreado y el bloqueo del desplazamiento de la página mientras el menú está abierto, y los menús admiten hasta tres niveles de navegación.
- Barra inferior Tab Bar: Añade una barra de navegación fija en la base de la pantalla que permanece visible mientras los compradores navegan.
Conviene dejar claro el alcance de Navi+: la aplicación no repara archivos dañados del tema ni parchea menús defectuosos propios del tema. En su lugar, actúa como un sistema de navegación externo que reemplaza el menú del tema cuando prefieres no editar código.
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.
Para analizar qué formato de navegación responde mejor a tu catálogo, consulta nuestras pautas para choose the right menu type y cómo integrar una bottom tab bar on mobile.
Action checklist after the fix
Una vez aplicada la solución en tu tema duplicado, recorre estos 7 puntos de control antes de publicar los cambios en vivo:
- Apertura y cierre bidireccional: Comprueba que el panel abre al instante al tocar la hamburguesa y cierra limpiamente con la cruz (
X) o tocando el fondo sombreado. - Despliegue de submenús: Toca cada categoría con elementos anidados para asegurar que las listas abren sin parpadeos ni cambios de página involuntarios.
- Cumplimiento de área táctil: Verifica que los enlaces y botones alcancen el criterio WCAG 2.2 SC 2.5.8 con una dimensión mínima de 24 x 24 píxeles CSS, con algunas excepciones (normas W3C sobre tamaño de destino).
- Pruebas en varios dispositivos: Examina el tema tanto en un dispositivo iOS (Safari) como en Android (Chrome) para detectar peculiaridades de cada sistema.
- Anotar cambios de código: Conserva un registro claro de cualquier regla CSS o modificación Liquid para poder recuperarla fácilmente en futuras actualizaciones.
- Considerar navegación visible: Recuerda que, según datos de Nielsen Norman Group, “the hamburger menu is not so universal that everyone knows it or immediately looks for it” (estudio de NN/g sobre navegación móvil). Valora opciones complementarias en navigation beyond the hamburger menu.
- Publicar solo el tema verificado: Activa la versión modificada en tu tienda en vivo únicamente cuando hayas superado todas las pruebas.
FAQ
Why won’t my Shopify hamburger menu open?
Habitualmente el panel está oculto por una regla CSS conflictiva o las líneas iniciales de theme.liquid se borraron al añadir una etiqueta o un script. Revisa la consola en busca de fallos de JavaScript y desactiva apps recientes antes de alterar el código.
How do I make a submenu open when I tap the parent item?
En el panel de Shopify bajo Contenido > Menús, arrastra e indenta los elementos hijos bajo su categoría principal. Muchos temas transforman la categoría con hijos en un botón de despliegue; otros comportamientos exigen ajustes del tema o CSS.
How many submenu levels does Shopify support?
La navegación de Shopify admite un elemento principal con hasta dos niveles de submenús anidados debajo, sumando tres niveles jerárquicos en total. Puede que el tema activo de tu tienda también deba estar adaptado para representar esos tres niveles.
Will my CSS fix disappear when I update my theme?
A menudo, sí. El código añadido directamente en base.css o main.css suele tener que volver a añadirse al actualizar a una nueva versión del tema. Duplica siempre tu tema antes de editar y mantén notas de los códigos personalizados.
Why do hover menus misbehave on phones?
Muchas pantallas táctiles no permiten hover cómodamente; MDN señala que muchos dispositivos móviles solo emulan el hover con una pulsación larga incómoda. Cuando una regla :hover de escritorio se activa al tocar, un desplegable puede abrirse y cerrarse de forma inesperada.
Can I change the width of the mobile drawer?
Según tu tema, a menudo puedes ajustar la anchura del menú lateral directamente en el editor de temas dentro de Cabecera. Si no existe ese ajuste, puedes aplicar una consulta max-width en CSS o emplear una aplicación que incluya esa opción.
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)
Explora los temas
Esta guía enlaza a artículos específicos — profundiza en cada uno.