En ocasiones queremos añadir un menú de WordPres en un sidebar. O en un lugar donde no necesariamente tenga un título. Te pongo el caso de un cliente.
El cliente pide un sidebar que al ponerse en modo móvil solo aparece el icono del menú, pero nada que lo identifique.
Esto sería el aspecto del menú en versión ordenador.
Tiene una distribución vertical para que se quede a modo de sidebar.
Cuando lo presentamos en una pantalla de móvil el aspecto sería el siguiente:
Este aspecto no facilita la comprensión de qué es ese icono. Quizás los más avispados logren identificarlo con un menú hamburguesa. Y viendo ambas versiones por el color de fondo del contenedor
Pero incluso a mí que he creado la web, me ha costado saber qué era eso.
Por desgracia desde la configuración nativa de WordPress no hay forma de configurar esta opción. Una funcionalidad muy interesante que podría incluir por defecto. En este caso vamos a tirar de un poco de imaginación y de código para solventar este problema.
Tan solo necesitamos identificar con una clase o etiqueta el menú. En este caso lo podemos identificar como «menupseudo».
Para hacer este debes seleccionar el bloque de navegación. y en la barra lateral de ajustes, nos desplazamos a avanzado y añadimos la clase «menupseudo»
Selección de bloque > Ajustes > Clases adicionales: «menupseudo»
Y a continuación en el editor del sitio, añadimos el código css que te dejo más abajo.
Editor del sitio > CSS adicional
/*pseudo elemento del menu*/
.menupseudo button.wp-block-navigation__responsive-container-open::before {
content: "Menú";
color: black;
font-size: 1em;
font-weight: bold;
padding: 5px 10px;
margin-right:50px;
}En la línea content y dentro de las comillas puedes poner el texto que quieras para mostrar en el menú. Solo quedaría que lo centrásemos o ajustásemos al diseño que queramos. Por ahora quedaría así:
