Si estás usando el Mega Menu en WordPress y no se muestra en dispositivos móviles puede ser por este problema causado por el tema o plantilla de WordPress que estemos usando. Veamos detenidamente el problema y cómo resolverlo para que se pueda visualizar el mega menu en móviles.

También te puede interesar:

 

Problema de CSS en MAX Mega Menu

Si accedemos a la web desde un ordenador se comprueba que el menú se muestra correctamente:

ejemplo de mega menu wordpress

Pero si reducimos las dimensiones del navegador, o accedemos desde un dispositivo móvil, vemos que el menú desaparece.

mega menu no se muestra en móviles

El problema se encuentra que en resoluciones pequeñas el mega menu se oculta por esta regla de diseño CSS:

@media (max-width: 980px)
.et_header_style_centered nav#top-menu-nav {
display: none;
}

Aquí podemos verlo si usamos las herramientas de desarrollador de Chrome o Firefox.

Si desactivamos la regla display: none vemos que se muestra el mega menu.

mega menu sin estilos

mega menu desplegado sin estilos

Veamos cómo resolverlo.

Solución al problema de visualización del Mega Menu en dispositivos móviles

Para solventar dicho problema, debemos añadir el siguiente código CSS en el CSS personalizado de nuestro tema o plantilla. Si usamos Divi WordPress, podemos añadirlo fácilmente desde CSS personalizado en las opciones de Divi sin tener que editar ficheros de WordPress y acceder al hosting:

Divi > Opciones del Tema > CSS Personalizado:

/* FIX mega menu no se muestra en moviles */
.et_header_style_centered nav#top-menu-nav {
display: block;
}

Con este cambio en la hoja de estilos, podremos ya visualizar el menú.

Ahora lo que faltaría por solventar sería el diseño de éste, para que los colores coincidan con nuestro diseño web.

Modificar el diseño web del Mega Menu

Para poder modificar el diseño de nuestro Mega Menu accedemos a las herramientas de Mega Menu desde el escritorio de WordPress.

Para ello nos vamos a Apariencia > Menús, y en nuestro mega menú elegimos Más opciones en los tres puntitos.

opciones de max mega menu

Después acudimos a la pestaña de configuración de dispositivos móviles Menú móvil:

configuraciones de mega menu para dispositivos móviles

Ahí podemos editar el diseño de los colores, tipo de letra, tamaños, etc del menú normal y del menú para móviles.

En mi caso, solo tuve que cambiar el color de fondo del menú y ponerlo transparente para que cogiera los colores por defecto del diseño de la plantilla.

opciones de max mega menu

También modifiqué estas otras opciones.

cambiar color de fondo de mega menu

El resultado fue el siguiente, obteniendo el mismo color de fondo de la web, desapareciendo el color negro que tenía por defecto.

nuevo diseño de mega menu para dispositivos móviles

Así queda el mega menú desplegado en dispositivos móviles:

mega menu desplegado en dispositivos móviles

Conclusiones

Puede que debido a nuevas actualizaciones de WordPress el menú haya dejado de funcionar y nos encontremos con este problema de visualización del Mega Menu en móviles. Por eso, conviene estar atento y realizar pruebas cada vez que actualicemos nuestro sitio, y sepamos resolverlas rápidamente para que ningún usuario tenga problemas de navegación en nuestro sitio.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies