Oferta SiteGround Black Friday

Tutorial Divi: Hacer fijo también el menú móvil

cabecera divi

Por si no te has dado cuenta, aunque tengas configurado el menú de Divi para que sea fijo, para que te persiga a menudo que se navega, desde móviles se queda arriba, no funciona el menú fijo.

En mi humilde opinión tiene cierto sentido, pues en un dispositivo móvil el poco espacio de pantalla disponible debe dedicarse al contenido, sin que lo ocupen otros elementos como menús, etc.

Ahora bien, si tú prefieres que también en móviles el menú de navegación persiga por la pantalla a los usuarios puedes modificarlo con este truco en dos pasos.

Haz fijo el menú móvil

Sencillo, para conseguir que tu menú de navegación siga al usuario a medida que navega simplemente añade el siguiente código a la sección CSS adicional del Personalizador:

/* Menú fijo Divi también en móvil */
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed !important; } }

Que se pueda hacer scroll en el menú móvil desplegable

Ahora bien, un menú móvil con subelementos siempre tiene un problema, y es que si tiene muchas páginas en el desplegable llega un punto en que topa con la parte inferior de la pantalla y no se puede seguir navegando. Te ha pasado ¿verdad?

Así que este otro truco sirve para que puedas hacer scroll en los elementos desplegables de tu menú móvil.

De nuevo, simplemente añade el código al CSS adicional del Personalizador:

/* Scroll en menú móvil desplegable */
.et_mobile_menu {
    overflow: scroll !important;
    max-height: 83vh;
}

Por supuesto, no se te olvide guardar y publicar los cambios para que Divi tenga también el menú fijo en móviles

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.8 / 5. Total de votos: 17

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

11 comentarios en “Tutorial Divi: Hacer fijo también el menú móvil”

  1. Facebook User

    Yo utilizo el tema Total, ¿estos trucos podrían ser válidos para este tema? Supongo que no servirán porque utilizará otras clases de objetos o funciones.
    Pero ¿podrías orientarme de cómo buscar? Soy nueva en WordPress.
    O si tienes tiempo para dedicarle posts al tema Total… mejor. Siempre voy con poco tiempo para dedicarle a toquetear el WP.
    Te lo agradecería un montón.

    Otra cosa, ¿Qué tiene el DIVI que últimamente lo veo por todas partes?¿Cuándo salió?

    1. No vale para Total tal cual, cada tema tiene sus propias clases CSS, pero puedes adaptarlo identificando la clase CSS que se aplique al menú móvil, si lo tiene, que no lo he usado. Conozco temas parecidos, como Bridge, pero no Total.

      Tienes que abrir el inspector web de tu navegador para encontrar la clase css adecuada, y luego ya si aplicar este truco, u otros.

      Divi viene a ser la evolución de temas como Total o Bridge, pero principalmente porque en vez de usar Visual Composer utiliza un maquetador propio que funciona mil veces mejor. Ya lleva unos añitos con nosotros, desde 2013 y ha mejorado muchísimo la verdad, ahora mismo es el rey de la maquetación

      1. Facebook User

        Desde luego, con el tema Total no encuentro ayudas o truquitos. Y he mirado DIVI, parece que hay que pagar anualmente, ¿es necesario para seguir usando el tema? Yo solo lo voy a usar para mi web de empresa. Me preocupa que no pueda actualizarlo si no sigo pagando la cuota anual.
        El tema Total lo tengo hace unos 2 ó 3 años, solo pagué al adquirirlo y sigo recibiendo las actualizaciones.

        1. De Total recibirás actualizaciones del tema pero no de Visual Composer, que es lo que realmente vale.

          Y sí, Divi lo pagas anualmente, o de por vida si lo prefieres, pero no solo por Divi sino que te dan otros 80 temas y unos cuantos plugins (buenísimos)

          Y no, no deja de funcionar si luego no pagas, pero hay que pagar por actualizar (y tener soporte).

  2. Jesus Jimenez

    Hola Fernando,
    Buenísimo tutorial como todos los que haces!!
    Lo he probado pero me come mucha pantalla en el móvil como tú bien dices. Lo que sí me gustaría es poder dejar el menú secundario fijo sólamente, ¿como podría hacerlo?

    Gracias!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Scroll al inicio