Consigue que los elementos del menú del H Theme estén siempre visibles en dispositivos móviles con este tutorial.
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.
Ya viste cómo conseguirlo para Genesis Sample y hoy vas a aprender a hacer lo mismo con el H Theme o cualquier otra plantilla de AsiThemes.
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 el menú a pantalla completa en dispositivos móviles
1. Elimina funciones de javascript
El H Theme incorpora un par de funciones de jQuery 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 las siguientes líneas:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
No es imprescindible que las elimines para ver el resultado final, pero sí recomendable ya no las vas a utilizar.
2. Modifica el fichero style.css
Ahora sí, una vez borrados los elementos que no vas a usar, debes hacer varios cambios en el CSS para conseguir el efecto que deseas.
2.1 Cambia las media queries mayores de 990px
Sustituye en la media query de 990px (línea 1626):
Para ver este código y los otros 2057 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.
2.2 Modifica las media queries menores de 650px
Elimina en la media query de 650px (línea 1869):
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
2.3 Añade estilos al menú
Por último, introduce el siguiente snippet al final del fichero style.css:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Este bloque 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 los utilizarás.
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.4 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 2057 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 plantilla.
Conclusiones
Si tienes un menu principal con pocos elementos, puede ser una buena idea mantenerlos siempre a la vista y al alcance del usuario.
Ahora ya sabes cómo obtener ese efecto en dispositivos móviles para el H Theme.
Aunque este snippet está pensado para una plantilla concreta, puede servirte de guía para modificar otros temas de AsiThemes.
¡Ah! Y si tienes alguna pregunta o quieres darme una sugerencia para próximos tutoriales, déjala en los comentarios.
Ventajas de ser suscriptor. 😉
