El icono de hamburguesa se ha vuelto casi un estándar. Vamos a ver como mostrar siempre ese icono hamburguesa en Genesis Sample.
Desde la aparición de los smartphones, poco a poco se ha ido estandarizando (de manera popular), el ya famoso icono de hamburguesa. Incluso no es nada raro encontrarlo en algún diseño web de escritorio.
No digo que implementarlo en un diseño de escritorio sea lo más accesible, pero desde luego hay muchos diseñadores que lo usan. Y no vamos a negar que es muy atractivo y cool ;).
Veamos como implementarlo en Genesis Sample.
Icono de hamburguesa visible
Para ello, en el archivo styles.css, dentro de la media query de 960px, eliminaremos las siguientes líneas.
En el archivo original comprenden de la línea 1449 a la 1530 incluidas.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Pero no me gustaría quedarme aquí. Eso nos deja una cabecera con un icono bastante pequeño y la palabra «menu», junto al icono.
Eliminar la palabra «menu»
Vamos a eliminar esa palabra y luego retocaremos un poco el icono.
Para eliminar la palabra «menu» editaremos unas líneas del archivo functions.php.
En la función donde se definen los ajustes del menú responsive, en la línea 'mainMenu' => __( 'Menu', 'genesis-sample' ), eliminaremos la palabra «menu», dejando así la función.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Un poco de estilo
Y ya sólo nos queda mejorar un poco el aspecto de ese icono hamburguesa. Le aportaremos unos estilos. Ya verás que con unas pocas líneas aumentamos el tamaño y lo alineamos en la cabecera.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Conclusión
En este artículo, resumiendo un poco, ha ido más de quitar que de poner. Aunque bueno, como dice el dicho popular, la cosa está en saber lo que hay que quitar.
Ya sabes que para cualquier consulta, puedes hacer un comentario abajo ;). Feliz día!