Por qué el submenú de Divi queda por debajo del contenido de tu web

El submenú de Divi queda por debajo del contenido cuando el encabezado, la fila, la columna o el propio módulo de menú están atrapados en una capa visual inferior o dentro de un contenedor que recorta lo que sobresale. No suele ser un misterio negro de WordPress ni una conspiración del constructor visual, aunque a veces lo parezca. Lo habitual es que haya una mezcla bastante terrenal de z-index, posición del elemento, overflow oculto, cabeceras hechas con Theme Builder, secciones hero demasiado dominantes o algún módulo que, sin levantar la mano, se coloca por encima del menú.

La solución real empieza por mirar el contenedor, no solo el submenú. Subir el z-index del desplegable puede funcionar en casos sencillos, pero falla cuando el menú vive dentro de una sección que ya está por debajo del contenido principal o cuando la columna tiene el overflow en hidden, auto o scroll. En Divi, el desplegable no flota en el aire como un cartel de neón: pertenece a una caja. Y si esa caja está mal apilada, recortada o encerrada, el menú se hunde detrás del contenido como una persiana que baja justo cuando el usuario intenta entrar.

El fallo suele estar en la capa, no en el menú

Divi permite crear menús desplegables desde el sistema de menús de WordPress y mostrarlos con el menú principal, el módulo Menu o el módulo Fullwidth Menu. Hasta ahí, nada raro. El problema aparece cuando ese menú se integra en una cabecera personalizada, sobre todo en diseños construidos con Theme Builder, donde cada sección, fila, columna y módulo tiene sus propias reglas de posición, visibilidad, animación y apilamiento. El resultado puede ser elegante en el editor y un pequeño sainete en la web publicada.

El síntoma es muy reconocible: pasas el cursor por el menú, el submenú se abre, pero queda tapado por una imagen, una sección hero, un bloque de texto, una ficha de producto o incluso por el contenido del post. En móvil puede ser más cruel todavía: el menú hamburguesa se despliega, pero parece desaparecer detrás del primer bloque de la página. No ha desaparecido. Está ahí, respirando mal, escondido en una capa inferior o recortado por su propio contenedor.

La trampa está en que Divi, como otros constructores visuales, convierte una página aparentemente simple en una arquitectura de cajas. Una sección contiene filas, la fila contiene columnas, la columna contiene módulos. Cada una puede tener márgenes, transformaciones, sombras, filtros, posición relativa o fija, visibilidad condicionada y reglas de desbordamiento. Y cada decisión visual, aunque parezca inocente, puede alterar el orden en el que el navegador pinta los elementos en pantalla.

Por eso no basta con mirar el menú como quien mira una lámpara fundida. El submenú depende de su árbol de contenedores. Si la sección del encabezado tiene menos prioridad visual que el cuerpo, el desplegable seguirá saliendo por debajo aunque al propio submenú se le ponga un z-index altísimo. Es como darle un megáfono a alguien encerrado en el sótano: grita más, sí, pero sigue debajo.

El detalle que más engaña: el z-index no manda siempre

El z-index ordena elementos en el eje de profundidad, esa especie de tercera dimensión imaginaria de una página web. Un elemento con un valor superior puede colocarse por encima de otro con un valor inferior, siempre que ambos jueguen dentro del mismo contexto de apilamiento. Ahí está la frase que suele estropear la tarde: dentro del mismo contexto. Porque si no están en el mismo contexto, el número deja de tener el poder mágico que muchos le atribuyen.

En una web hecha con Divi, un encabezado puede tener un módulo de menú con z-index: 99999 y aun así quedar por debajo de una sección hero con un z-index mucho más modesto. Suena absurdo, pero no lo es. Si la cabecera completa está metida en un contexto de apilamiento inferior, todos sus hijos quedan subordinados a ese contexto. El submenú puede presumir de número astronómico; el navegador, con una frialdad casi administrativa, lo seguirá tratando como parte de un bloque que va por debajo.

Los contextos de apilamiento se crean con más facilidad de la que parece. Una posición relative con z-index, una posición fixed, un transform, una opacidad inferior a 1, ciertos filtros, algunas animaciones o propiedades modernas de contención pueden levantar una nueva “planta” en el edificio visual. Y cuando hay varias plantas, no todos los elementos compiten directamente entre sí. Compiten primero sus edificios, por así decirlo.

Aquí aparece uno de los errores clásicos: aplicar z-index solo a .sub-menu y olvidarse de la sección del encabezado. En muchos casos, el ajuste debe hacerse en el contenedor padre: la sección global de cabecera, la fila que contiene el menú, la columna y el módulo. No porque haya que llenar la web de números enormes, sino porque el menú necesita estar dentro de una capa que realmente pueda quedar por encima del contenido.

El z-index, además, exige que el elemento esté posicionado. En términos prácticos, conviene que el encabezado o la sección relevante tengan position: relative, sticky o fixed, según el diseño. Un z-index aplicado a un elemento que no participa correctamente en el sistema de posicionamiento puede tener el mismo efecto que una etiqueta de “frágil” en una caja de piedras: queda bonito, pero no cambia gran cosa.

Overflow: la tijera invisible del Theme Builder

El otro sospechoso habitual es el overflow. Esta propiedad decide qué ocurre cuando un contenido sobresale de su caja. Si está en visible, lo que se sale puede verse. Si está en hidden, se recorta. Si está en auto o scroll, el navegador introduce un comportamiento de desplazamiento o contención. En una cabecera con desplegables, esto importa muchísimo, porque un submenú, por definición, sale de su espacio inicial. Se descuelga. Invade territorio.

Cuando una sección, una fila o una columna de Divi tiene el overflow en hidden, el submenú puede quedar cortado aunque su z-index sea correcto. No está detrás del contenido: está amputado por la caja que lo contiene. Es una diferencia importante. En pantalla, ambos problemas se parecen; en código, no tienen la misma cura. En el primer caso hay que ordenar capas. En el segundo, hay que dejar respirar al contenido que sobresale.

Divi incluye opciones de visibilidad y overflow en secciones, filas, columnas y módulos. Eso es útil para diseños limpios, efectos visuales y composiciones controladas, pero puede convertirse en una trampa cuando se usa en cabeceras. Una columna con overflow oculto puede recortar el dropdown. Una fila demasiado rígida puede impedir que el menú se despliegue. Una sección global con una configuración heredada puede arrastrar el problema por todo el sitio, página tras página, como una mancha de aceite.

La pista más clara es esta: si el submenú se ve parcialmente, si aparece cortado justo en el límite de la fila o si solo falla dentro de una cabecera concreta, conviene revisar primero Horizontal Overflow y Vertical Overflow. En muchos casos, poner ambos en visible en la sección, fila, columna y módulo del menú devuelve el desplegable a la superficie sin tocar una sola línea de CSS. Divi lo permite desde el panel avanzado, y conviene probarlo antes de empezar la guerra de los !important.

Cuando el menú fijo se comporta como una persiana rota

Las cabeceras fijas y sticky añaden otra capa de teatro. Un menú fijo debe mantenerse visible mientras el usuario baja por la página, pero si su contexto visual no está bien definido, puede quedarse por detrás de bloques posteriores. Se nota mucho cuando hay imágenes grandes, sliders, módulos con animaciones, secciones con transformaciones o bloques de WooCommerce que traen sus propias reglas de estilo. El menú sigue fijo, sí, pero no necesariamente por encima.

En Divi, esto se ve a menudo en diseños donde el encabezado se ha construido como una sección global. El editor muestra el menú correctamente, el primer vistazo en la web parece limpio, y al hacer scroll el submenú empieza a esconderse. La tentación es culpar al navegador. Pobre navegador, otra vez pagando platos ajenos. En realidad, suele haber un conflicto entre la cabecera fija y el contenido que viene después, especialmente si ese contenido crea su propio contexto de apilamiento.

La solución pasa por dar a la cabecera una jerarquía clara. La sección del header debe quedar por encima del cuerpo. La fila y la columna no deben recortar el submenú. El módulo debe poder desplegarse fuera de su caja inmediata. Y el contenido principal no debería tener un z-index innecesariamente alto salvo que haya una razón de diseño muy concreta. Hay webs con más z-index que presupuesto, y se nota.

Cómo revisar el problema sin romper media web

La revisión más sensata empieza en el inspector del navegador. No hace falta ponerse bata blanca, pero sí mirar con algo de método. Al pasar el cursor por el menú, se puede localizar el elemento .sub-menu, comprobar qué reglas lo afectan y ver si está siendo cubierto por una sección posterior o recortado por un padre. El inspector muestra los estilos calculados, los contenedores, las reglas tachadas y, con algo de paciencia, el culpable que se escondía como gato bajo el sofá.

La primera comprobación debe ser el overflow de los contenedores. En Divi, interesa revisar la sección del encabezado, la fila, la columna y el módulo de menú. Si alguno tiene overflow hidden, auto o scroll sin necesidad real, ahí hay un candidato serio. El desplegable necesita salir de su caja, no pedir permiso por ventanilla. Poner el overflow en visible suele ser el primer arreglo limpio cuando el menú aparece cortado.

La segunda comprobación es el z-index del bloque completo de cabecera. No solo del submenú. La cabecera global debe estar por encima del área de contenido. En una instalación típica con Theme Builder, conviene identificar la clase de la sección del header y darle posición relativa o fija, más un z-index razonable. No hace falta usar números ridículos de seis cifras; lo importante es que la jerarquía sea coherente. Un 999 o 9999 puede bastar si el resto del sitio no está convertido en una subasta de capas.

La tercera comprobación apunta a transformaciones, filtros y efectos. Una sección con transform, una animación, un filtro o una opacidad alterada puede crear un contexto de apilamiento propio. Muchas veces se aplican estos recursos para dar movimiento, profundidad o una entrada más vistosa al diseño. Bonito, sí. Pero si están cerca del encabezado o en una sección que se coloca por encima del menú, pueden provocar que el dropdown quede enterrado.

También conviene mirar plugins. Barras de cookies, pop-ups, módulos de caché que combinan CSS, optimizadores que difieren JavaScript, extensiones de WooCommerce o añadidos visuales para menús pueden cambiar el orden de carga o insertar estilos en línea. No siempre son culpables, pero tampoco son monjas de clausura. Si el problema aparece tras instalar algo o activar una optimización, hay que revisar esa coincidencia con calma.

El CSS que suele devolver el menú a su sitio

Cuando las opciones visuales no bastan, una solución prudente consiste en asignar una clase propia a la sección de cabecera, por ejemplo cabecera-divi-visible, y trabajar sobre ella. Así se evita disparar CSS contra toda la web. El objetivo no es pegar un parche a ciegas, sino decirle al navegador que la cabecera tiene prioridad visual y que sus contenedores no deben recortar el desplegable.

.cabecera-divi-visible {
  position: relative;
  z-index: 9999;
  overflow: visible !important;
}

.cabecera-divi-visible .et_pb_row,
.cabecera-divi-visible .et_pb_column,
.cabecera-divi-visible .et_pb_menu,
.cabecera-divi-visible .et_pb_menu_inner_container {
  overflow: visible !important;
}

.cabecera-divi-visible .et_pb_menu__menu,
.cabecera-divi-visible .et-menu-nav,
.cabecera-divi-visible .nav,
.cabecera-divi-visible .sub-menu {
  z-index: 9999;
}

Este código ataca los dos frentes habituales: visibilidad del desbordamiento y prioridad de capa. La clase se coloca en la sección del header, no en cualquier módulo perdido. Así el ajuste queda encapsulado y es más fácil retirarlo, modificarlo o ampliarlo. En Divi, meter CSS global sin clase propia puede arreglar una página y desordenar tres. Vieja tradición de los apaños rápidos: entran como solución y salen como incendio.

Si la cabecera es fija, puede tener sentido usar position: fixed o position: sticky, pero eso ya depende del diseño. El punto delicado es no aplicar fixed al menú sin entender qué ocurre alrededor. Un módulo fijo dentro de una columna recortada seguirá teniendo problemas. Una cabecera sticky dentro de una sección con overflow oculto puede comportarse de forma extraña. La prioridad debe ser ordenar el contenedor grande, luego ajustar el módulo.

En móviles, el menú de Divi puede necesitar reglas específicas. Si el desplegable hamburguesa se abre por debajo de una imagen o queda cortado al ocupar toda la pantalla, el contenedor móvil debe tener altura y desplazamiento coherentes. El menú no solo debe verse; también debe poder desplazarse con el dedo cuando hay muchas opciones. Una tienda con veinte categorías y un menú móvil sin scroll es una trampa para el usuario, no una navegación.

.cabecera-divi-visible .et_mobile_menu {
  position: absolute;
  z-index: 99999;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}

Este ajuste puede servir como base, pero no como dogma. La altura de la cabecera, la posición del logo, la barra superior y la estructura del menú cambian de una web a otra. En algunos diseños, el menú móvil debe ser fixed; en otros, absolute funciona mejor. La diferencia está en probar con el móvil real, no solo reduciendo la ventana del ordenador. El navegador de escritorio imita muchas cosas, pero no imita el pulgar, la barra del sistema ni ciertas rarezas del scroll táctil.

Por qué en el editor se ve bien y publicado falla

Una de las escenas más irritantes de Divi es esa diferencia entre el Visual Builder y la web publicada. En el editor el submenú aparece limpio, por encima de todo, obediente. En producción se mete detrás del contenido como si tuviera vida propia. La explicación es menos novelesca: el editor carga barras, envoltorios, estilos y scripts que no siempre existen igual en el frontal. La página publicada tiene otra estructura de capas, otra carga de CSS y, a veces, optimizaciones activas.

La caché también juega. Divi genera CSS estático y los plugins de rendimiento pueden combinar, minificar o diferir archivos. Si se cambia el z-index o el overflow y el sitio sigue igual, quizá no se está viendo el CSS nuevo. Limpiar la caché de Divi, del plugin de optimización, del servidor y del navegador puede parecer una liturgia pesada, pero evita perseguir fantasmas. No es glamuroso. Funciona.

Hay otro factor: las plantillas. Una cabecera global puede verse perfecta en una página simple y fallar en una plantilla de entrada, categoría o producto. WooCommerce, los módulos de blog, los sliders o ciertas secciones dinámicas pueden introducir estilos con prioridad propia. Por eso el fallo debe mirarse en el tipo de página donde aparece, no solo en la home. La web no es una postal; es un sistema de habitaciones conectadas, y en cada una puede haber una silla mal puesta.

La prueba decisiva consiste en reducir el problema. Se desactivan temporalmente efectos del hero, se baja el z-index del contenido sospechoso, se pone visible el overflow de la cabecera, se revisa la posición de la sección y se comprueba de nuevo. Sin dramatismo. Cuando el submenú vuelve a aparecer, ya se sabe qué pieza lo estaba hundiendo. El arreglo definitivo no debería ser más grande que el problema.

La navegación también necesita jerarquía

El submenú de Divi queda por debajo del contenido porque la página no entiende el menú como un elemento soberano, sino como parte de una estructura de cajas, capas y recortes. Esa es la explicación técnica, desnuda y sin purpurina. La buena noticia es que el fallo suele tener arreglo sin reconstruir la web: revisar overflow, ordenar el z-index del header completo, controlar las posiciones y evitar que el contenido principal se coloque por encima de la navegación.

El menú de una web no es decoración. Es la puerta, el pasillo, el mapa mínimo. Cuando un submenú queda escondido detrás de una imagen hero, la estética se come la función, ese pequeño pecado tan frecuente en el diseño web contemporáneo. Divi ofrece herramientas suficientes para resolverlo, pero exige recordar algo básico: una cabecera debe estar arriba no solo en la maqueta, también en la arquitectura invisible del CSS.

La corrección limpia no consiste en llenar la hoja de estilos de números absurdos ni en culpar a Divi por cualquier sombra torcida. Consiste en entender dónde está atrapado el desplegable. Si está recortado, se libera el overflow. Si está detrás, se ordenan las capas. Si falla solo en móvil, se revisa el menú móvil. Si aparece bien en el editor y mal en producción, se mira caché, plantilla y CSS final. Menos martillo, más linterna.