Mostrar siempre los elementos del menú en móviles en el X Theme

Consigue que los elementos del menú del X Theme estén siempre visibles en dispositivos móviles con este tutorial mediante código.

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ó cómo sería la variación para hacerlo en el X Theme.

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 el H Theme, así que hoy vas a aprender a hacer lo mismo con el X 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ú del X Theme a pantalla completa en dispositivos móviles

1. Elimina funciones de javascript

El X Theme incorpora una función de jQuery que se encarga de gestionar el comportamiento del menú responsive.

Con la modificación que vas a realizar no necesitas esta función, así que la puedes renombrar o eliminar.

Se trata de las siguientes líneas en el fichero scripts.js (dentro de /assets/js/) :

No es imprescindible que las elimines para ver el resultado final, pero sí recomendable ya que 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

En la sección Site Header borra los estilos de la media query de 990px (línea 973):

Con esto consigues que se muestren los elementos necesarios en todo momento y eliminas los que sobran.

2.2 Añade estilos al menú

Por último, introduce el siguiente snippet al final del fichero style.css:

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.3 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 darle algunos retoques agregando este fragmento al final de style.css:

¡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 X 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. 😉

Tutoriales relacionados

• https://codigogenesis.com/mostrar-menu-pantalla-completa-moviles-genesis-sample/
• https://codigogenesis.com/mostrar-siempre-elementos-menu-moviles-genesis-sample/
• https://codigogenesis.com/mostrar-siempre-elementos-menu-moviles-h-theme/
• https://codigogenesis.com/destacar-boton-cualquier-elemento-menu-s-theme/