Descubre en este tutorial cómo conseguir que al abrir el menú de Genesis Sample en dispositivos móviles ocupe la pantalla completa mediante código.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes proponer tutoriales. Hace unos días Carlos me preguntó:
Hola Nahuai,
¿Podrías hacer un tutorial de cómo poner un menú de hamburguesa en Genesis Sample Theme? Y ya si fuera a pantalla completa genial
¡Muchas gracias!
Lo que desea Carlos es que, cuando se haga clic sobre el menú hamburguesa en dispositivos móviles, se abra a página completa, como en muchos de los temas de AsiThemes.
Este sería el resultado final:
¿Tú también quieres conseguir este efecto al pinchar en el menú de Genesis Sample en pantallas pequeñas?
Pues sigue leyendo. 😉
Snippet para visualizar el menú a pantalla completa en dispositivos móviles
Añade al final del fichero style.css:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
¡Ya lo tienes!
Ahora cuando pulses el botón de menú en smartphones o tablets, este ocupará toda la pantalla.
Si estás experimentando con distintas opciones en dispositivos móviles, echa un ojo a este tutorial para conseguir que el menú se desplace lateralmente.
Conclusiones
¿Te gusta que en móviles el menú hamburguesa se abra en formato pantalla completa? Ahora ya sabes cómo obtener ese efecto en Genesis Sample.
Aunque este tutorial está pensado para un child theme concreto, puede servirte de guía para modificar otros temas hijo de Genesis Framework.
¿Prefieres que lo adapte a alguno de ellos en particular? Dímelo en los comentarios y prepararé un tutorial a medida.
Ventajas de ser suscriptor. 😉
