[Resuelto] Menú móvil igual que menú escritorio  

Hola, Ana

He revisado tu página y veo que tienes 6 elementos de menú de primer nivel y eso significa que si los despliegas en horizontal, en dispositivos móviles, se desbordará el menú por la derecha, truncando los ítems de menú que no quepan y tendrá un comportamiento poco usable para el visitante de tu web.

Por CSS en Divi es un "pelín" complejo en hacer el cambio que comentas porque no solo intervienen clases CSS en la composición de menús, sino que heredan comportamientos de las clases CSS del propio WordPress y que Divi no duplica, sino que utiliza.

Una opción viable sería hacerlo mediante algún plugin, como "Divi Mobile Menu" https://www.elegantthemes.com/marketplace/divi-mobile/, pero es de pago (comercial) y no creo que sea una inversión viable para el cambio que buscas.

Yo suelo usar WP Mobile Menu – The Mobile-Friendly Responsive Menu https://es.wordpress.org/plugins/mobile-menu/ o Responsive Menu – Create Mobile-Friendly Menu https://es.wordpress.org/plugins/responsive-menu/ que me permiten hacer cosas con los menús en WordPress y con Divi, sin tener que tocar código, pero es para "mejorar" las opciones básicas del menú para dispositivos que incluye WordPress e incluso Divi. No es una solución para desactivar el menú hamburguesa, sino para personalizarlo de forma que se muestre de forma más visual, incluso cambiando colores, textos y posición.

Antes de "ocultar" el menú hamburguesa en dispositivos y mostrar el menú clásico de WordPress, deberías analizar si a nivel SEO y experiencia de usuario, mejorará o empeorará el CTR de tu página, algo que deberías evaluar con tu Google Search Console > Rendimiento.

Si sigues queriendo, después de analizar lo dicho, hacer ese cambio, coméntalo y vemos si hay opciones viables vía CSS que funcionen para el layout de Divi que usas en tu web.

@alejo 

Muchísimas gracias por la respuesta. Mejor lo dejo tal cual ¡Que tengas un buen día!

Hola, Ana

Entiendo que desistes del cambio, que bien analizado, podría perjudicar el SEO de tu página, y sobre todo la usabilidad a los visitantes, ya que en muchos dispositivos móviles muestran por defecto en 720p y eso dificultaría la lectura de los textos del menú, sobre todo si muestras muchos ítems.

Una solución que yo suelo aplicar en sitios, para mejorar el CTR y facilitar a los visitantes la comprensión del menú hamburguesa, es cambiar ☰ por un icono de una hamburguesa, o GIF animado, que ayuda a captar la atención de los visitantes (CTR = tasa de clics).

Este CSS lo añades en "Apariencia > CSS adicional", al final, cambiando la URL por la ruta donde hayas subido tu icono animado o estático a mostrarse en dispositivos móviles.

/** Icono hamburguesa menú móvil */
.mobile_menu_bar:before {
content:"";
display: block;
background-image: url(https: //tu-dominio.com/wp-content/uploads/burger_ 16677896.gif);
background-repeat: no-repeat;
background-size: contain;
width: 80px;
height: 80px;
margin: 10px;
}

Algún ejemplo que puedes usar: https://www.flaticon.com/free-animated-icon/burger_16677896

Esta solución va a depender del Tema que uses y del tipo de "constructor visual" (page builder) usado, en caso de que utilices alguno. En algunos sitios que lo he probado no ha funcionado bien y he tenido que tocar código y en otros el comportamiento es el esperado, mejorando la tasa de clics.

Es cuestión de si quieres darle una vuelta de tuerca al menú de hamburguesa de WordPress que hay que reconocer que es bastante aburrido y transmite poco.

Saludos 🙂 

@alejo

Muchas gracias! Una solución genial para lograr captar la atención. 

¡Saludos!

Hola Ana.

¡De nada! Me alegra que te haya sido útil la explicación. 

Si tienes más preguntas sobre WordPress o cualquier otro tema, no dudes en preguntar.

Un Saludo