Es unas de las cosas que primero edito en este tema. Vamos a ver como mover fuera del menú el icono de búsqueda en Monochrome Pro Theme.
Para nada es un mal theme, al contrario. De hecho lo considero muy bueno para trabajar. Aunque prefiero los temas «movil first», Monochrome Pro está muy bien hecho y con un código muy claro. Pero eso sí, en mi opinión trae un error de usabilidad muy grabe.
El icono de búsqueda, esa lupa que nos permite mostrar el formulario para buscar, en las pantallas más pequeñas de 1023px, desaparece!. No es que se esconda detrás del menú de hamburguesa con el resto del menú, no. Desaparece del todo! Como si los usuarios de móviles no tuviesen derecho a hacer búsquedas.
Pues bien, con una edición del código y un poco de CSS vamos a remediar eso.
NOTA: Antes de continuar, como apunte te diré que Monochrome Pro, trae una opción para mostrar o no el icono de búsqueda ( la lupa), en el personalizador. La edición que más abajo describo, no anula esa opción. Es decir, si decides no mostrar la lupa, simplemente desmarca la opción y desaparecerá. Pero si la muestras, con este tutorial, será visible para todas las pantallas.
Editamos el functions.php
En el theme original el icono se incluye como otro elemento más del menú principal. Nosotros, por sí decirlo, lo vamos a sacar y lo mostraremos independiente al menú. De esta manera se mostrará junto al icono de hamburguesa en las pantallas más pequeñas, como hemos visto en la imágen.
Vamos a editar el archivo functions.php. Concretamente estas líneas.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
CSS
Dado que con la sustitución del código en el archivo functions.php hemos cambiado la estructura HTML, deberemos maquetarlo con algo de CSS.
Ahí va lo justo para que quede como en la demo original.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
He incluido un poco más de margen en pantallas pequeñas porque la mayoría son táctiles. Estas las manejamos con los dedos y no somos tan precisos como con el ratón.
Conclusión
Con esta sencilla edición hemos solventado, lo que a mi parecer es un problema grabe de accesibilidad. O una mala experiencia del usuario. Como quieras expresarlo.
Además conservamos gracias a la función PHP la opción de mostrar o no el icono de búsqueda del personalizador.
Bajo mi experiencia, no trabajo con este theme sin esta modificación.
Para cualquier duda ya bien con el código PHP o el CSS, puedes dejar un comentario. Las resolveré todas con mucho gusto. 🙂 Feliz día!