El menú MAX Mega Menu no se muestra en dispositivos móviles

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:
Novedades de Divi 5.0
¿Qué son y para qué sirven los plugins de WordPress?
¿Qué es Elementor WordPress? Todo sobre Diseño Web con Elementor
Curso de Diseño Web con Divi

Problema de CSS en MAX Mega Menu

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

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

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.

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.

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

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.

También modifiqué estas otras opciones.

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

Así queda el mega menú 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.