Cambiar punto de ruptura del bloque navegación de WordPress

Inicialmente el sistema de bloques de WordPress, llamado Gutenberg por aquel entonces, no tuvo muy buena acogida. Reconozco que yo mismo fui escéptico acerca de su futuro, ya que en aquel momento trataba de competir con maquetadores visuales como Visual Composer o Elementor, que se encontraban bien asentados y que eran muchísimo más versátiles.

Sin embargo y pese a ese comienzo poco prometedor, ha ido logrando lentamente una mayor recepción por parte del púbico general y especialmente entre los desarrolladores web. Sin duda el haber incorporado el editor de sitios de manera nativa ha sido un acierto, ya que nos permite crear un tema completo prácticamente a través de la interfaz. Esto incluye la cabecera y el pie.

Para los menús, ahora disponemos de un bloque que nos facilita la tarea de la integración. Incluso podemos indicar si lo colapsaremos en resolución móvil para mostrarlo en una ventana modal. Por desgracia, hasta aquí llega lo bueno, ya que las opciones de las que disponemos a la hora de controlar la adaptabilidad no van más allá.

No podemos definir desde la interfaz el punto de ruptura o breakpoint, lo cual es problemático para menús de una cierta extensión. Pero siempre podemos recurrir a un poco de CSS y usar reglas de medios o media queries para modificar los breakpoints que WordPress define por defecto.

Clases que intervienen

Primero hagamos un breve repaso a las clases CSS que interviene en el bloque de navegación de WordPress. Esto permite conocer un poco mejor los elementos con los que estamos trabajando y de este modo te resultará después realizar modificaciones posteriores según tu web necesite.

• .wp-block-navigation – bloque principal. Aquí no lo usaremos, pero es importante conocer su clase.
• .wp-block-navigation__responsive-container-open – botón que abre el menú móvil.
  • .always-shown – visible incluso en escritorio si está presente.

• .wp-block-navigation__responsive-container – contenedor que agrupa todo el menú móvil.
  • .hidden-by-default – estado por defecto: oculto.
  • .is-menu-open – estado activo abierto (también se añade .has-modal-open a veces).

• .wp-block-navigation__responsive-container-close – botón para cerrar el menú.
• .wp-block-navigation__container – contenedor de enlaces (flex/ul).
• .wp-block-navigation__submenu-container – contenedor de submenús.

Modificando los breakpoints

Vistas las clases, ahora veamos una aplicación práctica de cómo podemos ajustarlas para modificar el responsive de un menú. En este caso necesitaremos abarcar tres etapas en las que jugaremos con reglas de medios para controlar esos puntos de ruptura,

Primero preparamos el comportamiento del menú móvil en anchos mayores al original (600px), asegurando que el menú esté oculto por defecto, salvo que esté activado. Por este motivo indicamos que el contenedor responsive se oculte, salvo que esté abierto (.is-menu-open). También ocultamos el botón de cerrar, igualmente cuando no esté abierto. Y por último nos aseguramos que los submenús se posicionen correctamente a la izquierda del navegador cuando el menú esté abierto.

/* Ocultar el menú móvil por debajo del nuevo breakpoint (600px) */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: none;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        left: 0;
    }
}

Después creamos un nuevo punto de ruptura con una horquilla entre 600px y 1195px que es donde activaremos el comportamiento responsive. Esto hará que se muestre el menú tipo hamburguesa, que por defecto estaba oculto en ese rango.

/* Nuevo breakpoint: mostrar menú móvil entre 600px y 1195px */
@media (min-width: 600px) and (max-width: 1195px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
}

Por último indicaremos que por encima del tamaño definido anteriormente (1195px), se muestre el menú de escritorio y oculte el botón de hamburguesa.

/* Justo por encima del nuevo breakpoint: restaurar menú de escritorio */
@media (min-width: 1195px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: none;
    }
}

Puedes guardar estos estilos en la hoja de estilos del tema o en el apartado reservado para los estilos personalizados en el editor del sitio, lo que mejor le convenga a tu proyecto.

Como diseñador web especializado en WordPress, crear temas desde cero a partir de diseños personalizados es el pan de cada día, por lo que estoy acostumbrado a trabajar yendo mucho más allá de lo que la herramienta permite. Si estás buscando ayuda profesional para