Tutorial WordPress: Hacer un menú secundario solo en móviles con CSS

Introducción

Este tutorial muestra con todo lujo de detalles cómo crear un menú secundario que solo se muestre en dispositivos móviles usando CSS. Incluye el registro del menú en functions.php, la salida en la plantilla de tu tema y varias opciones CSS (incluida una versión con checkbox hack para abrir/cerrar sin JavaScript). También se abordan accesibilidad, puntos de ruptura recomendados y cómo evitar conflictos con el menú principal.

Requisitos previos

Tener un tema hijo (child theme) o acceso al tema para editar functions.php y plantillas.
Conocer dónde se renderiza el menú en tu tema (header.php, sidebar.php, footer.php o plantillas parciales).
Conocimientos básicos de CSS y PHP en WordPress.

Resumen de la solución

Registrar una ubicación de menú secundaria en functions.php.
Insertar el markup del menú en la plantilla adecuada (ej. header.php) con una clase específica.
Escribir CSS que oculte el menú en escritorio y lo muestre en pantallas pequeñas mediante media queries.
Opcional: añadir un botón/hamburguesa para expandir/colapsar el menú en móvil usando solo CSS (checkbox hack) o mantenerlo siempre visible en móviles según la UX deseada.

1) Registrar el menú secundario

Añade este código en functions.php de tu tema hijo para registrar la ubicación. Esto permite asignar el menú desde Apariencia → Menús.

 Menú secundario (móvil),
    ) )
}
add_action( after_setup_theme, tema_hijo_registrar_menu )
?>

2) Insertar el menú en la plantilla

Coloca la salida del menú en el archivo donde quieras que exista la versión móvil (por ejemplo, header.php o una plantilla parcial). Usa una clase única para poder apuntar con CSS sin afectar otros menús.

 secondary_mobile,
    container      => nav,
    container_class=> secondary-menu-mobile,
    menu_class     => secondary-menu-mobile__list,
    fallback_cb    => false,
) )
?>

Si prefieres incluir un toggle (abre/cierra) sin JavaScript, el HTML requerido podría ser así (añádelo cerca de la llamada a wp_nav_menu o en la plantilla). Este ejemplo usa un input checkbox y label para actuar como botón:



☰


   secondary_mobile,
      container      => false,
      menu_class     => secondary-menu-mobile__list,
      fallback_cb    => false,
    ) )
  ?>

3) CSS básico: mostrar solo en móviles

La forma más directa es ocultar el menú por defecto (desktop) y mostrarlo en un punto de ruptura (breakpoint) para móviles. Un breakpoint común es 768px, pero cámbialo según tu diseño.

/ Estilos globales: ocultar por defecto (desktop) /
.secondary-menu-mobile {
  display: none
}

/ Punto de ruptura para móviles: mostrar a pantallas pequeñas /
@media (max-width: 767px) {
  .secondary-menu-mobile {
    display: block / o flex según tu diseño /
    width: 100%
    background: #fff
    border-top: 1px solid #e6e6e6
  }

  .secondary-menu-mobile__list {
    list-style: none
    margin: 0
    padding: 0.5rem
  }

  .secondary-menu-mobile__list li {
    margin: 0.25rem 0
  }

  .secondary-menu-mobile__list a {
    display: block
    padding: 0.5rem 0.75rem
    text-decoration: none
    color: #222
  }

  .secondary-menu-mobile__list a:hover,
  .secondary-menu-mobile__list a:focus {
    background: #f2f2f2
  }
}

Notas sobre el breakpoint

Usa max-width: 767px para móviles y tablets pequeñas. Si quieres incluir tablets, sube el valor (ej. 991px).
Evita usar !important salvo que sea estrictamente necesario para sobrescribir estilos del tema.

4) Versión con botón toggle (solo CSS, checkbox hack)

Si necesitas que el menú esté oculto inicialmente en móviles y se abra con un botón, puedes usar un input de tipo checkbox y seleccionar con CSS el estado :checked. Este enfoque funciona sin JavaScript pero requiere que el HTML esté presente (ver la inserción de markup más arriba).

/ Estilos iniciales /
.secondary-menu-toggle {
  display: none / escondemos el checkbox real /
}

/ Botón visible en móviles /
.secondary-menu-toggle-button {
  display: none / por defecto no mostrar en desktop /
  cursor: pointer
  font-size: 1.4rem
  padding: 0.5rem
}

/ Mostrar botón y ocultar menú por defecto en móviles /
@media (max-width: 767px) {
  .secondary-menu-toggle-button {
    display: inline-block
  }
  .secondary-menu-mobile {
    display: none
  }

  / Cuando el checkbox está marcado, mostramos el menú /
  .secondary-menu-toggle:checked   .secondary-menu-toggle-button   .secondary-menu-mobile {
    display: block
  }

  / Si tu estructura difiere (label y nav no están adyacentes), ajusta el selector /
}

Importante: la regla de selección (.secondary-menu-toggle:checked .secondary-menu-toggle-button .secondary-menu-mobile) asume que el orden en el DOM es: input, label, nav. Si no coincide, ajusta el selector CSS o envuelve en un contenedor común para poder usar un selector combinado.

5) Accesibilidad y consideraciones ARIA

Añade aria-label al container del nav para describir el menú: aria-label=Menú secundario móvil.
Si usas un botón toggle, gestiona los atributos ARIA desde el marcado (con JS sería ideal actualizar aria-expanded, pero con la solución solo CSS no es posible cambiar atributos booleanos dinámicamente — considera usar JS si necesitas que ARIA refleje el estado).
Si usas el checkbox hack, oculta el checkbox visualmente pero mantenlo accesible para teclado y lectores de pantalla con técnicas adecuadas (evitar display:none en elementos interactivos que deban ser accesibles).
Comprueba el orden tab en móviles y que los enlaces sean suficientemente grandes y espaciados para interacción táctil.

6) Evitar conflictos con el menú principal

Usa clases únicas (ej. .secondary-menu-mobile) para que tus reglas no afecten al menú principal.
Si el tema tiene CSS con selectores muy específicos, podrías necesitar igualar la especificidad o colocar tu CSS al final (child theme style.css o mediante wp_enqueue_style con dependencia) para que prevalezca.
Verifica la visibilidad en distintos tamaños y con el inspector del navegador para detectar reglas heredadas que obliguen a usar !important sólo como último recurso.

7) Ejemplos prácticos y variantes

Mostrar siempre el menú en móvil (sin toggle)

/ Mostrar solo en móviles, siempre visible /
.secondary-menu-mobile { display: none }
@media (max-width: 767px) {
  .secondary-menu-mobile { display: block }
  / Estilos adicionales: fondo, separación, etc. /
}

Menú desplegable tipo acordeón por items (CSS puro limitado)

Si el menú tiene submenus y quieres acordeón sin JavaScript, se puede usar checkbox por cada ítem padre o el selector :focus-within (mejor compatibilidad moderna). Ejemplo esquemático:

/ ejemplo simple con focus-within para submenus /
.secondary-menu-mobile__list li {
  position: relative
}
.secondary-menu-mobile__list li ul {
  display: none
  padding-left: 1rem
}
.secondary-menu-mobile__list li:focus-within > ul,
.secondary-menu-mobile__list li:hover > ul {
  display: block
}

8) Comprobaciones y pruebas

Asignar el menú en Apariencia → Menús a la ubicación Menú secundario (móvil).
Probar en móvil real y en el inspector de responsive del navegador a varios tamaños: 320px, 375px, 412px, 768px.
Probar navegación con teclado y lector de pantalla para garantizar accesibilidad mínima.
Verificar que en escritorio el menú secundaria no aparece y que no interfiere con el menú principal ni con el layout.

9) Buenas prácticas

Mantén la interfaz del móvil ligera: menos ítems o agrupados si procede.
Evita duplicar contenidos innecesarios: si el menú secundario contiene enlaces útiles en móvil pero no en desktop, documenta por qué esa duplicidad existe para futuros mantenedores.
Si la interacción requiere estados ARIA precisos (aria-expanded), considera añadir un pequeño script que sincronice el estado accesible (mejor que confiar solo en CSS para estados accesibles).
Usa transiciones CSS suaves para apertura/cierre si implementas toggle (max-height overflow o transform) para una experiencia fluida.

Recapitulación final

Crear un menú secundario visible solo en móviles es un proceso sencillo en tres pasos: registrar la ubicación, renderizarla con una clase específica y aplicar media queries para mostrarla únicamente en pantallas pequeñas. Para interactividad sin JavaScript puedes usar el checkbox hack para mayor accesibilidad y control recomendamos añadir una pequeña porción de JavaScript que actualice atributos ARIA. Prueba siempre en varios dispositivos y asegúrate de que los estilos del tema no sobrescriban tus reglas.

Enlaces útiles: Documentación de Menús en WordPress

SushiHost