Consigue con este tutorial que los elementos del menú de Genesis Sample estén siempre visibles en dispositivos móviles.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes proponer nuevos tutoriales. A raíz del manual donde explicaba cómo mostrar el menú a pantalla completa en Genesis Sample para dispositivos móviles, Sergio me preguntó:
¡Gran tutorial! ¿Y se podría hacer algo parecido con el menú en versión móvil del theme H, y que en vez del menú hamburguesa saliera un menú normal? Sobre todo pensando en tipos membership site donde solo hay dos enlaces (acceder y suscribirse).
Me refiero a algo similar a como lo tienen en la versión móvil de asilohacemos.com.
¡Gracias maestro Jedi!
Esta petición es muy interesante, porque si solo tienes un par de elementos en el menú (como es el caso de muchas membresías) no tiene sentido ocultarlos detrás el típico menú de hamburguesa, ya que quedan menos accesibles para el usuario.
Hoy vas a aprender cómo conseguirlo para Genesis Sample, aunque este código puede servirte de guía para cualquier otro child theme de Genesis.
Este sería el resultado final:
¿Tú también quieres decirle adiós al menú hamburguesa en pantallas pequeñas?
Pues sigue leyendo. 😉
Pasos para visualizar los elementos del menú en dispositivos móviles
1. Elimina los estilos del menú responsive
La hoja de estilos de Genesis Sample tiene estilos personalizados para menú responsive, por eso se ve distinto al escritorio. Como en este caso quieres que se muestre igual en ambos vas a eliminar estos estilos.
Para ello borra las siguientes líneas (que comienzan en la 1114) del fichero style.css:
Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.
2. Modifica los estilos CSS
Ahora sí, una vez eliminados los estilos que no vas a utilizar, debes cambiar el CSS para conseguir el efecto que deseas.
Para ello, añade el siguiente snippet al final del fichero style.css:
Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.
La primera parte del código consigue que los estilos, que por defecto solo se aplican a pantallas mayores de 960 píxeles de ancho, se muestren siempre.
También te aseguras de que no se muestre el menú hamburguesa (menu-toggle).
Si quieres puedes «podar» algunas líneas del código relacionado con el menú responsive y los sub-menús ya que no se utilizarán.
En cualquier caso, a partir de ahora cuando visites la página desde smartphones o tablets seguirás viendo los elementos del menú.
¡Adiós a la hamburguesa!
2.1. Convierte uno de los items del menú en un botón
Este apartado es opcional, pero si lo que buscas es dejar clara tu llamada a la acción (CTA), te recomiendo destacar uno de los items del menú.
Para ello, necesitas darle una clase de CSS al elemento del menú como viste en el artículo dedicado a ello.
En este caso puedes aprovechar la clase .button y le darle algunos retoques agregando este fragmento al final de style.css:
Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.
¡Ya lo tienes!
Te invito a personalizar el color y otras características del botón para que esté alineado con tu estilo de marca y tu child theme.
Si tienes una versión más antigua de Genesis Sample (< 3.3) echa un ojo a estas instrucciones
1. Renombra o elimina los ficheros de javascript
Genesis Sample incorpora un par de archivos que se encargan de gestionar el comportamiento del menú responsive. Con la modificación que vas a realizar no los necesitas así que los puedes renombrar o eliminar.
Se trata de los siguientes ficheros:
- responsive-menus.js.
- responsive-menus.min.js.
2. Desencola los ficheros de javascript
Y como no vas a utilizar los ficheros anteriores, lo más apropiado es que no los llames desde el fichero de functions.php.
Por lo tanto, elimina o comenta las siguientes líneas de código:
Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.
3. Modifica el fichero style.css
Ahora sí, una vez eliminados los elementos que no vas a utilizar, debes cambiar el CSS para conseguir el efecto que deseas.
Para ello, añade el siguiente snippet al final del fichero style.css:
Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.
La primera parte del código consigue que los estilos, que por defecto solo se aplican a pantallas mayores de 960 píxeles de ancho, se muestren siempre.
El resto se encarga de centrar el logo y el menú en dispositivos móviles (con un máximo de 650px de píxeles).
Si quieres puedes «podar» algunas líneas del código relacionado con el menú responsive y los sub-menús ya que no se utilizarán.
En cualquier caso, a partir de ahora cuando visites la página desde smartphones o tablets seguirás viendo los elementos del menú.
¡Adiós a la hamburguesa!
3.1. Convierte uno de los items del menú en un botón
Este apartado es opcional, pero si lo que buscas es dejar clara tu llamada a la acción (CTA), te recomiendo destacar uno de los items del menú.
Para ello, necesitas darle una clase de CSS al elemento del menú como viste en el artículo dedicado a ello.
En este caso puedes aprovechar la clase .button y le darle algunos retoques agregando este fragmento al final de style.css:
Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.
¡Ya lo tienes!
Conclusiones
Si tienes un menu principal con pocos elementos, puede ser una buena idea mantenerlos siempre a la vista y al alcance de usuario.
Ahora ya sabes cómo obtener ese efecto en dispositivos móviles para Genesis Sample.
Aunque este snippet está pensado para una plantilla concreta, puede servirte de guía para modificar otros child themes de Genesis Framework.
¿Prefieres que lo adapte a alguno de ellos en particular? Dímelo a través del formulario de contacto y prepararé un tutorial a medida.
Ventajas de ser suscriptor. 😉
