• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mostrar el menú móvil fijo en la parte inferior de la pantalla en Genesis Sample

Aprende en este tutorial cómo conseguir que el menú móvil de Genesis Sample esté siempre visible al pie de la pantalla mediante código.

Una de las ventajas de ser suscriptor de Código Genesis es que puedes proponer nuevos tutoriales.

El otro día Vicente me propuso un tutorial para dejar el menú para móviles fijo y siempre visible en la parte inferior de la pantalla.

Esta es una solución interesante ya que, de esta manera, el menú queda más accesible que en la parte superior, especialmente en móviles grandes.

Así que me puse manos a la obra tomando como referencia Genesis Sample.

Este sería el resultado final:

colocar menu movil fijo parte inferior.gif

¿Tú también quieres colocar el menú hamburguesa en la parte inferior de la pantalla?

Pues sigue leyendo. 😉 

Snippet para mostrar el menú de hamburguesa en la parte inferior de la pantalla en Genesis Sample

Añade las siguiente líneas al final del fichero style.css:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

Con esto consigues posicionar el menú hamburguesa en la parte inferior de la pantalla en móviles.

También recolocas el menú cuando se abre, para que quede en la parte inferior y al alcance de la mano para tus visitas.

Puedes modificar la posición del menú y/o modificar los colores del mismo con pequeñas variaciones en el CSS.

A partir de ahora, cuando alguien visite tu página (o la de tu cliente) desde un smartphone, tendrás el menú siempre a mano.

Conclusiones

Con este tutorial ya sabes cómo enviar el menú de hamburguesa de Genesis Sample a la parte inferior de la pantalla en móviles.

Aunque este snippet está pensado para una plantilla concreta, puede servirte de guía para modificar otros child themes de Genesis.

Si tienes alguna petición en particular puedes hacerlo a través del formulario de contacto.

Ventajas de ser suscriptor. 😉

Cabecera CSS Genesis Framework Genesis Sample Menú

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?