Cómo ajustar el tamaño de un menú en una aplicación de navegación: dimensiones de la barra de pestañas, menú móvil y mega menú en Shopify

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

Abre los ajustes de diseño del menú y cambia por separado cinco cosas: tamaño del texto, altura de los elementos, ancho del menú o del panel lateral, tamaño de los iconos y espaciado de las áreas táctiles. Mantén las áreas táctiles en al menos 24 x 24 píxeles CSS, revisa en un móvil estrecho y usa CSS personalizado solo cuando no exista un ajuste.

Para ajustar el tamaño del menú de tu tienda sin tocar código, sigue estos cinco pasos:

1. Selecciona tu tipo de menú: Abre tu app de navegación y elige el diseño a modificar (barra de pestañas inferior, menú lateral móvil o mega menú de escritorio).
2. Define la escala de texto: Ajusta el tamaño de fuente por separado para enlaces principales y subcategorías para crear una jerarquía visual clara.
3. Calibra la altura de fila: Aumenta el relleno vertical o establece una altura mínima (min-height) para que los enlaces sean fáciles de pulsar con el pulgar.
4. Ajusta ancho e iconos: Ensancha el panel lateral o submenú para dar cabida a títulos largos de colecciones y escala los iconos en proporción.
5. Prueba en un móvil estrecho: Revisa el menú en un dispositivo real o a 320 píxeles CSS de ancho para verificar legibilidad y comodidad táctil.

What “Menu Size” Actually Means: Five Dimensions

Cuando un menú se ve descompensado en un teléfono, los comerciantes suelen buscar un único control deslizante para agrandarlo o reducirlo. En diseño web, sin embargo, el “tamaño del menú” no es un ajuste único, sino el equilibrio de cinco dimensiones geométricas distintas.

Modificar una dimensión sin ajustar las demás rompe la coherencia visual. Por ejemplo, agrandar el texto sin ensanchar el panel lateral hace que los nombres largos de colecciones se corten. Aumentar los iconos sin incrementar la altura de la fila hace que los botones se vean apretados.

Estas medidas se definen en píxeles CSS (px). Un píxel CSS es una unidad abstracta de visualización empleada por navegadores web. En pantallas móviles de alta densidad, un píxel CSS equivale a varios píxeles físicos del dispositivo.

Si además necesitas modificar colores, tipografías, estados de cursor flotante o sombras, consulta nuestra guía completa para cambiar colores y fuentes del menú.

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

Un motivo habitual de confusión en Shopify es la distribución de los ajustes de navegación.

En la administración estándar de Shopify, los enlaces y niveles de menú se gestionan en Tienda online > Navegación. No obstante, el aspecto visual, la tipografía y el comportamiento adaptable del menú móvil se configuran exclusivamente en el Editor de temas (fudge.ai).

Shopify Admin
 ├── Tienda online > Navegación  --> Jerarquía de enlaces & URLs (Contenido)
 └── Tienda online > Temas
      └── Editor de temas       --> Diseño de cabecera & estilos visuales (Visualización)

Muchos temas de Shopify no tienen un ajuste dedicado para el tamaño del menú lateral móvil ni para la altura de las filas, por eso las respuestas en los foros de la comunidad suelen ser fragmentos de CSS. Los ajustes disponibles cambian de un tema a otro: revisa primero el editor de tu propio tema.

Además, las cabeceras de escritorio funcionan de forma muy diferente a los menús táctiles. Cuando enlaces horizontales se comprimen en un menú hamburguesa, tamaños de letra que se veían proporcionados en un portátil resultan diminutos o desmesuradamente grandes en la pantalla de un móvil. Conoce estos límites a fondo en nuestro análisis sobre los límites de los menús de temas de Shopify.

Adjust Tab Bar Size: Icon, Label and Bar Height

Una barra de pestañas inferior fija los destinos clave al alcance directo del pulgar. Sin embargo, si la barra es demasiado delgada o apretada, pulsar con precisión se convierte en un reto incómodo.

Figura 1: Ilustración conceptual (Concept illustration) — Adjust Tab Bar Size: Icon, Label and Bar Height

En una app de navegación, debes coordinar tres ajustes principales:

1. Tamaño de icono: El símbolo gráfico que representa cada sección (Inicio, Catálogo, Búsqueda, Carrito).
2. Tamaño de etiqueta: El texto breve situado debajo o al lado del icono.
3. Altura de barra: La altura vertical total del contenedor anclado en la parte inferior de la pantalla.

Si aumentas el tamaño del icono para que se reconozca mejor, debes aumentar también la altura total de la barra. Si conservas la misma altura, los iconos y textos quedarán apretados contra los bordes.

Mantén las etiquetas sumamente cortas: lo idóneo es una sola palabra como “Inicio”, “Buscar” o “Carrito”. Los textos largos se cortan con puntos suspensivos o se solapan con pestañas contiguas. Cada pestaña necesita una zona táctil cómoda. Si deseas profundizar en ergonomía táctil, revisa nuestra guía sobre barras de pestañas y navegación adaptada al pulgar.

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

El menú lateral desplegable (Drawer) es el formato móvil estándar. Al estructurar enlaces en una lista vertical, dimensionarlo requiere equilibrar la escala del texto, la separación entre filas y el ancho del contenedor.

1. Tamaño de texto escalonado

Evita usar un mismo tamaño de letra para todos los niveles. Las categorías principales (Nivel 1) necesitan un texto mayor para guiar la vista. Las subcategorías (Niveles 2 y 3) deben tener un tamaño menor y sangría proporcional.

2. Espaciado de fila con Min Height y Padding

Cuando los enlaces están muy juntos verticalmente, los usuarios pulsan por error el elemento adyacente. En tu app de navegación, usa los controles de Min Height (altura mínima de fila) o Item Padding vertical. Una altura mínima garantiza un área táctil suficiente incluso en enlaces con títulos cortos.

3. Ancho del panel lateral (Drawer Width)

El ancho del panel define cuánto espacio horizontal cubre el menú al desplegarse. Si el panel es demasiado estrecho, los nombres extensos de colecciones saltarán a dos o tres líneas de forma desigual.

Al aumentar el tamaño de fuente, ensancha el panel en consonancia para que los títulos quepan en una sola línea. Comprueba siempre el menú en pantallas estrechas de 320 píxeles CSS (W3C Reflow). Para consultar arquitecturas de paneles laterales, revisa nuestras mejores prácticas para menús laterales móviles.

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

En ordenadores, los mega menús organizan catálogos amplios mediante paneles desplegables en varias columnas. Conseguir el tamaño correcto implica gestionar el ancho de los paneles, la separación de columnas y el contenido gráfico.

Submenús de una columna vs. paneles multicolumna

Las aplicaciones diferencian entre desplegables sencillos y grandes paneles:

• Submenús de una columna: Usa el ajuste de Submenu Width para determinar el ancho del panel (ajuste de ancho del submenú). Así evitarás que el menú se reduzca en exceso o se ensanche innecesariamente.
• Paneles multicolumna de expansión completa: En mega menús complejos, ajusta el ancho total para asegurar separaciones amplias entre columnas.

Dimensiones del Mega Menú
 ├── Ancho de submenú (Desplegables simples de 1 columna)
 ├── Ancho de expansión completa (Diseños de múltiples columnas)
 ├── Encabezados de columna (Jerarquía visual sobre subenlaces)
 └── Imágenes de categoría (Ancho acotado para evitar desbordamientos)

Jerarquía entre encabezados y subenlaces

En diseños multicolumna, los encabezados guían la lectura rápida. Haz que los títulos de columna sean visualmente mayores y más destacados que los enlaces inferiores para facilitar el escaneo visual.

Controlar el tamaño de imágenes promocionales

Muchos mega menús incluyen tarjetas o imágenes destacadas de colecciones. Los elementos gráficos ocupan bastante espacio horizontal. Si el panel se siente saturado, reduce y acota el ancho de las imágenes antes de ensanchar el contenedor del menú más allá de la pantalla.

Las pantallas móviles son mucho más estrechas que los paneles de escritorio: revisa la versión móvil de un mega menú por separado de la de escritorio, en lugar de suponer que las medidas de escritorio se mantienen.

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

Al definir las dimensiones del menú, evita elegir medidas al azar. Los estándares de accesibilidad web y los estudios de ergonomía aportan referencias contrastadas sobre áreas táctiles y legibilidad.

Según las Pautas de Accesibilidad para el Contenido Web (WCAG 2.2) del W3C, el Criterio de Éxito 2.5.8 (Target Size Minimum, Nivel AA) exige que los objetivos táctiles midan al menos 24 by 24 CSS pixels, salvo excepciones específicas (W3C Target Size Minimum).

Para una experiencia táctil óptima, el Criterio 2.5.5 (Target Size Enhanced, Nivel AAA) estipula un tamaño de al menos 44 by 44 CSS pixels (W3C Target Size Enhanced). El W3C recomienda cumplir este tamaño mínimo independientemente del espacio circundante en botones y enlaces principales.

Investigaciones del Nielsen Norman Group respaldan estas medidas: el tamaño físico mínimo de un objetivo táctil debe rondar 1cm by 1cm (0.4in by 0.4in) (NN/g Touch Target Size). NN/g recalca que los elementos interactivos deben ser lo bastante grandes primero, y estar bien separados después.

Asimismo, el criterio WCAG 1.4.4 (Resize Text) exige que el texto pueda aumentarse hasta un 200 % mediante herramientas del navegador sin pérdida de contenido ni de funcionalidad (W3C Resize Text). Para más detalles, consulta nuestra guía de accesibilité de navegación.

Test on a narrow screen and at larger text

La conformidad requiere verificar el menú en pantallas reducidas. Bajo el criterio WCAG 1.4.10 (Reflow), el contenido de desplazamiento vertical debe funcionar plenamente a un ancho equivalente a 320 CSS pixels sin requerir desplazamiento horizontal (W3C Reflow).

Al probar tu menú redimensionado:

• Abre las herramientas de inspección del navegador y ajusta el ancho a 320 píxeles CSS.
• Despliega el panel lateral y los submenús para cerciorarte de que los textos no se desborden.
• Aumenta el zoom de texto del sistema para comprobar que las áreas táctiles siguen siendo cómodas y legibles.

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

La gran mayoría de ajustes de tamaño pueden realizarse con los controles visuales de tu app de navegación. Sin embargo, si tu tema aplica estilos inflexibles o falta una opción concreta, el CSS personalizado puede ser necesario.

Ten presentes las normas de la plataforma Shopify:

• Alcance global en el tema: El código CSS añadido en la configuración del tema repercute en todas las páginas de tu tienda online, con excepción de la pantalla de pago (Shopify Adding Custom CSS).
• Límite de caracteres: Shopify restringe el campo de CSS personalizado global a 1500 caracteres (Shopify Adding Custom CSS).
• Copia de seguridad previa: Shopify recomienda expresamente duplicar el tema antes de realizar cambios en código o CSS (Shopify Duplicating Themes), lo que permite descartar errores al instante.
• Variabilidad de selectores: Los nombres de clases CSS cambian entre temas de Shopify. Pegar código de foros sin comprobar su compatibilidad suele causar desajustes visuales.

Observa esta guía en video sobre cómo cambiar el tamaño de fuente del menú en Shopify:

Video: Demostración sobre el cambio de tamaño de fuente del menú en un tema de Shopify.

Troubleshooting: Size Not Changing, Text Cut Off or Wrapping

Al modificar dimensiones de navegación, suelen darse tres incidencias frecuentes:

1. Los cambios de tamaño no se reflejan

• Nivel de menú incorrecto: Comprueba si editaste el Nivel 1 o los Niveles secundarios 2/3. Modificar el Nivel 1 no altera los submenús salvo que se configure así.
• Modo de vista previa de dispositivo: Verifica que estás editando el perfil adecuado. Modificar valores de escritorio no afectará a la visualización en teléfonos.
• Caché del navegador: Los navegadores almacenan hojas de estilo. Comprueba la tienda en una ventana de incógnito.
• Sobrescritura por CSS del tema: El archivo CSS de tu tema puede incluir reglas de mayor especificidad. Inspecciona el elemento para identificar la regla dominante.

2. Texto de menú cortado (Truncamiento)

Tal como recoge la documentación de W3C, cuando las palabras son más anchas que el espacio horizontal disponible, terminan cortándose (W3C Resize Text).

Medidas de solución:

• Ensanchar el contenedor: Aumenta el ancho del panel lateral o del submenú.
• Moderar el tamaño de letra: Disminuye levemente el tamaño de texto.
• Acortar etiquetas: Emplea términos de navegación más directos y concisos.

3. Salto de línea frente a puntos suspensivos

Según MDN Web Docs, para mostrar puntos suspensivos (...) en un texto desbordado se requiere la combinación de text-overflow: ellipsis, overflow: hidden y white-space: nowrap (MDN text-overflow).

Si el texto salta a una segunda línea sin puntos suspensivos, es un ajuste de línea habitual. No se trata de un error: permitir dos líneas suele ser preferible a cortar palabras, siempre que la altura de fila albergue ambas líneas con holgura.

Figura 3: Ilustración conceptual — Comparación entre etiquetas cortadas con puntos suspensivos en un panel estrecho y un ajuste limpio en un panel ensanchado.

Trade-offs: What Resizing Cannot Fix

Redimensionar mejora la legibilidad y la precisión al pulsar, pero presenta contrapartidas funcionales:

• Densidad de información reducida: Fuentes mayores y filas más altas facilitan la interacción, pero reducen el número de enlaces visibles en pantalla, obligando a desplazarse más.
• Menús saturados no se salvan reduciendo la letra: Si tu catálogo tiene decenas de colecciones desorganizadas, reducir el tamaño del texto no lo hace más usable. Genera un bloque denso e ilegible. Los menús sobrecargados requieren simplificación de catálogo, no miniaturización.
• Pérdida del contexto visual de fondo: Un panel lateral a todo el ancho de la pantalla asegura que las palabras quepan, pero oculta la tienda. Mantener una franja de fondo visible ayuda al comprador a orientarse.
• Diferencias entre escritorio y móvil: Las medidas que lucen bien en una pantalla grande raramente funcionan en una pantalla táctil. Valora cada dimensión de forma separada en ambos entornos.

Where Navi+ Fits

Si tu tema de Shopify carece de opciones para el ancho del panel móvil o la altura de la barra de pestañas, Navi+ Tab Bar & Mega Menu pone a tu disposición herramientas visuales para Tab Bar, Mobile Menu y Mega Menu.

Capacidades de tamaño verificadas en la aplicación:

• Tipografía independiente por nivel: Configura Font Size (en px) por separado para enlaces principales (Nivel 1) y subcategorías (Nivel 2 y Nivel 3) (ajustes de diseño de nivel 1 de Navi+).
• Altura de fila y márgenes: Ajusta Min Height (en px) y el relleno vertical Item Padding por nivel para garantizar pulsaciones cómodas (ajustes de diseño de nivel 1 de Navi+).
• Tamaño de iconos: Controla Icon Size (en px) para todos los iconos de navegación en cada nivel (ajustes de diseño de nivel 1 de Navi+).
• Ancho de submenús y paneles: Ajusta Submenu Width en desplegables de una columna (ajuste de ancho del submenú) y paneles expandidos en mega menús.
• Dimensiones de contenedor: Define la altura de la barra de pestañas y el ancho del panel lateral móvil (en móvil y en escritorio).
• Sintaxis responsive flexible: Los campos de espaciado admiten la sintaxis mobile | desktop para asignar valores distintos a móvil y escritorio en una sola casilla.
• Estructura clara de 3 niveles: Admite hasta 3 niveles de profundidad para mantener una jerarquía limpia y comprensible.

Si tu tema no tiene ningún ajuste para el ancho del panel lateral o la altura de la barra de pestañas, Navi+ Tab Bar & Mega Menu te permite definir el tamaño del texto, la altura de los elementos, el tamaño de los iconos y el ancho del menú por cada nivel, y previsualizarlo antes de publicar. Pruébalo primero en un tema duplicado.

Action Checklist

Utiliza esta lista de verificación en 8 pasos para auditar y probar tu menú antes de publicarlo:

• Duplicar el tema: Crea una copia de respaldo de tu tema activo antes de editar código o estilos CSS (Shopify Duplicating Themes).
• Configurar texto por niveles: Asigna tamaños de letra independientes a categorías principales y secundarias.
• Definir altura mínima de fila: Configura relleno o altura mínima para asegurar zonas táctiles cómodas.
• Calibrar el ancho del contenedor: Ensancha el panel lateral o submenú para albergar los nombres más largos.
• Equilibrar iconos: Escala los iconos en proporción a la altura del contenedor para evitar saturación.
• Comprobar tamaños táctiles: Confirma que todos los elementos clicables alcancen al menos 24×24 píxeles CSS (W3C Target Size Minimum).
• Probar a 320 píxeles CSS: Revisa la vista responsive a 320 píxeles CSS sin desbordamiento horizontal (W3C Reflow).
• Verificar cortes al ampliar: Inspecciona las etiquetas con un aumento de texto del 200% para evitar truncamientos inesperados (W3C Resize Text).

FAQ

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

Aprovecha las opciones integradas de tipografía de tu tema o app de navegación. Aunque muchos temas de Shopify requieren editar código en hojas de estilo (fudge.ai), una app como Navi+ ofrece un ajuste de tamaño de fuente para cada nivel (ajustes de diseño de nivel 1 de Navi+).

How wide should a mobile menu drawer be?

No existe una medida universal única. El panel debe permitir ver una franja de la tienda de fondo para que el visitante no pierda la orientación, y a la vez ser lo bastante amplio para mostrar etiquetas sin cortes en pantallas de 320 píxeles CSS (W3C Reflow).

How big should menu tap targets be?

Según WCAG 2.2 AA, los objetivos táctiles deben medir como mínimo 24 por 24 píxeles CSS (W3C Target Size Minimum), mientras que el nivel AAA aconseja 44 por 44 píxeles CSS (W3C Target Size Enhanced). El Nielsen Norman Group recomienda una medida física aproximada de 1cm por 1cm (NN/g Touch Target Size).

Why is my menu text cut off?

El texto se corta cuando las palabras superan el ancho horizontal asignado al contenedor (W3C Resize Text). Puedes solucionarlo ensanchando el panel o submenú, reduciendo ligeramente el tamaño de fuente o acortando el nombre del enlace.

Do I need to duplicate my theme before adding CSS?

Sí. Shopify recomienda explícitamente crear un duplicado de tu tema antes de modificar código o insertar código CSS para poder deshacer cualquier error visual con facilidad (Shopify Duplicating Themes).

Sources

• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Criterio 2.5.8 sobre tamaño mínimo de objetivos táctiles (Nivel AA).
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Enhanced) — Criterio 2.5.5 sobre objetivos táctiles ampliados (Nivel AAA).
• W3C Web Accessibility Initiative: WCAG 2.2 Resize Text — Criterio 1.4.4 sobre cambio de tamaño de texto hasta un 200%.
• W3C Web Accessibility Initiative: WCAG 2.2 Reflow — Criterio 1.4.10 sobre desplazamiento vertical a 320 píxeles CSS.
• Nielsen Norman Group: Touch Target Sizes on Mobile Devices — Estudio de Aurora Harley sobre dimensiones físicas de objetivos táctiles.
• Shopify Help Center: Duplicating Themes — Guía sobre copia de seguridad de temas antes de editar código.
• Shopify Help Center: Adding Custom CSS to Themes — Documentación sobre alcance y límite de caracteres en CSS de temas.
• fudge.ai: How to Change the Mobile Menu in Shopify — Guía para configurar el menú móvil dentro del Editor de temas.
• MDN Web Docs: text-overflow CSS Reference — Referencia técnica sobre propiedades text-overflow, overflow y white-space.
• Navi+ Help Center: Level 1 Design Settings — Documentación sobre Font Size, Icon Size, Min Height y padding.
• Navi+ Help Center: Layout Settings — Documentación sobre Submenu Width y paneles de mega menú.