Mostrar el menú en un selector CSS

Guía práctica Todos los planes 3 min de lectura

La app coloca tu menú dentro de cada elemento que coincida, sustituyendo su contenido. Úsalo en temas personalizados o muy editados donde Automático y Reemplazar la navegación no funcionan, para un lugar concreto o para menús solo de escritorio o solo móviles.

Nota

La app recomienda esta opción para desarrolladores, o cuando las otras opciones no funcionan. ¿No te sientes cómodo con los selectores CSS? Contáctanos y te instalamos el menú gratis.

Configurar los selectores CSS

1. Selecciona Mostrar el menú en este selector CSS

   En el editor de menús, haz clic en la pestaña Ajustes de la barra izquierda. En Posición, elige Mostrar el menú en este selector CSS.

   

   Mostrar el menú en este selector CSS con sus dos campos de selector

2. Introduce los selectores

   Rellena los dos campos descritos en Ajustes, más abajo. Los textos grises #SiteNav y #AccessibleNav son marcadores de posición, no valores guardados.

3. Guarda y publica

   Haz clic en Guardar y luego publica el menú. Comprueba tu tienda en escritorio y en móvil.

Ajustes

Selector CSS de tu menú principal

El elemento que contiene tu menú de escritorio, por ejemplo #SiteNav, .header__inline-menu o nav.main-menu. Déjalo vacío para mostrar el menú solo en móvil.

Selector CSS de tu menú móvil

El elemento que contiene tu menú móvil, por ejemplo #AccessibleNav o .menu-drawer. Déjalo vacío para mantener el menú móvil de tu tema (solo escritorio).

• Varios elementos: separa los selectores con comas, por ejemplo .header__inline-menu, .sticky-header nav. El menú se coloca en cada coincidencia.
• Un elemento para ambos formatos: introduce el mismo selector en los dos campos. La app lo alterna entre el formato de escritorio y el móvil según el tamaño de pantalla.
• Elige el contenedor, no un enlace suelto: selecciona el elemento que envuelve todo el menú (normalmente un <nav> o un <ul>); si no, el menú acaba dentro de un solo elemento.
• Prefiere selectores estables: IDs o clases del tema como .header__inline-menu. Los selectores generados como body > div:nth-child(3) > … se rompen cuando cambia el tema.

Encontrar un selector CSS

También puedes hacer clic en ¿Cómo encontrar el selector CSS de tu menú? bajo los campos.

1. Inspecciona el menú

   Abre tu tienda en Chrome, haz clic con el botón derecho en el menú y elige Inspect.

2. Encuentra el contenedor del menú

   En el panel Elements, pasa el cursor sobre las etiquetas. Busca el <nav> o <ul> más cercano cuyo resaltado cubra todo el menú.

3. Copia el selector

   Usa # más su id (#SiteNav) o . más una clase clara (.header__inline-menu). Si no, haz clic con el botón derecho en la etiqueta, elige Copy > Copy selector y pégalo en la app.

4. Repite para el móvil

   Haz clic en el icono de dispositivo en DevTools, elige un teléfono y abre el menú móvil (icono de hamburguesa). Repite para obtener el selector móvil.

Consejo

Prueba un selector antes de guardarlo: en la Console de DevTools, ejecuta document.querySelectorAll('your-selector'). Una lista vacía significa que el selector es incorrecto.

¿Quieres el menú donde tu tema no tiene ningún menú? Consulta Agregar una posición de menú personalizada.

Páginas relacionadas

• Agregar una posición de menú personalizadaMuestra el menú exactamente donde quieras agregando tu propio contenedor al código del tema.
• ¿Puedo usar menús distintos en escritorio y en móvil?Muestra un menú en escritorio y otro en móvil, o oculta algunos elementos según el dispositivo.
• ¿Por qué no se muestra mi menú en la tienda?Una lista de comprobación paso a paso para cuando el menú no aparece en tu tienda o se ve mal.

¿Te ha sido útil?

Informar de un problema