Por defecto, el bloque de menú nos muestra una ventana emergente en la versión móvil con un estilo bastante genérico, plano y aburrido. En esta ocasión aprenderemos a darle estilo al menú móvil y pasar…
Ajuste del bloque de navegación #
Lo primero que debemos hacer es ajustar el bloque de navegación para que los elementos del menú se ubiquen del lado izquierdo. Para esto nos vamos a: Apariencia > Editor > Patrones > Cabecera. Esto nos abrirá la plantilla de la cabecera (header) de nuestra página.
Al seleccionar el bloque de navegación, en las opciones de ajustes del bloque, justificamos los elementos a la izquierda, como se muestra en la imagen a continuación:
Añadir estilos CSS #
Una vez que hemos ajustado el bloque, ahora resta añadir los estilos adicionales de CSS en nuestro plugin de códigos o en el recuadro de CSS Adicional en la opción de personalización de WordPress.
/* Botón de cerrar ubicado a la izquierda */
.wp-block-navigation__responsive-container-close {
right: auto;
left: 0;
}
/* Contenedor del menú móvil */
@media(max-width:599px){
.wp-block-navigation__responsive-container {
/* Ancho del contenedor */
width: 60%;
/* Opacidad del fondo */
box-shadow: 0px 0px 10px 300px rgb(0 0 0 / 60%);
/* Espacio superior */
padding: 2rem!important;
}
.wp-block-navigation ul {
width: 100%;
}
/* Borde inferior en los elementos del menú */
.wp-block-navigation ul li {
border-bottom: 1px solid #bdbdbd;
width: 100%;
padding-bottom: 1rem;
}
/* Borde superior en el primer elemento del menú */
.wp-block-navigation ul li:first-child {
border-top: 1px solid #bdbdbd;
padding-top: 1rem;
}
}
Se pueden modificar los valores indicados en los comentarios, tales como: El ancho del contenedor, el nivel de opacidad de fondo, el margen superior del contenedor, el color de borde de los elementos, etc.
¡Y listo! De esta manera queda estilizado el menú en la versión móvil.