DIVI 5: Menú transparente sobre hero → sólido al hacer scroll

¿Qué vamos a construir exactamente?

Este efecto tiene 3 partes:

1. Sección del menú con fondo transparente — usando la opción Fondo de la Sección en Divi 5
2. El hero queda "debajo" del menú mediante un margen negativo en la Sección del hero
3. CSS personalizado que cambia el fondo a blanco cuando Divi activa el sticky

Requisito previo: el menú ya debe ser sticky

Esta lección parte de la Lección 08-02 donde ya hiciste el menú sticky. Si no lo hiciste, volvé a esa lección primero. La propiedad position: sticky y la clase .et-sticky-header--active son la base de este efecto.

Paso 1 — Hacer transparente la Sección del menú

Abrí el Theme Builder → Encabezado Global. Hacé clic en el engranaje ⚙️ de la Sección que contiene el menú principal (Sección 2).

En el panel derecho, andá a Contenido → Fondo. Lo que ves es el panel de la imagen que mandaste:

• Vas a ver Fondo De con los iconos (color, gradiente, imagen, video, patrón, máscara)
• El primer ícono (balde de pintura) ya está seleccionado = Color de Fondo
• Hacé clic en + Añadir Color De Fondo
• En el selector de color, dejá el color como blanco #ffffff pero llevá la opacidad (alpha) a 0%
• Así el fondo queda 100% transparente

Paso 2 — Configurar el Diseño de la Sección

En la misma Sección, andá a Diseño → Espaciado:

Paso 3 — CSS que cambia el fondo al hacer scroll

En la misma Sección del menú → Avanzado → CSS → CSS De Forma Libre, reemplazá (o expandí) el CSS de sticky que ya tenés:

/* ── Posición sticky ── */
selector {
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* ── Estado inicial: transparente ── */
selector {
    background-color: transparent !important;
}

/* ── Al hacer scroll: blanco sólido con línea dorada ── */
selector.et-sticky-header--active {
    background-color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(13, 27, 42, 0.15);
    border-top: 3px solid #ffb606;
}

Paso 4 — Ajustar el color del texto del menú para que sea legible

Cuando el menú está transparente sobre el hero oscuro, los links del menú deben ser blancos. Cuando se vuelve sólido sobre fondo blanco, deben ser oscuros. Divi 5 no puede hacer ese cambio automáticamente solo con CSS De Forma Libre del módulo Menú, así que vamos a usar un CSS adicional:

En WordPress → Apariencia → Personalizar → CSS adicional, agregá:

/* ── Menú transparente: links blancos ── */
.et-sticky-header:not(.et-sticky-header--active) .et_pb_menu .et_pb_menu__menu a,
.et-sticky-header:not(.et-sticky-header--active) .et_pb_menu .et_pb_menu__menu > ul > li > a {
    color: #ffffff !important;
}

/* ── Menú sólido (sticky activo): links oscuros ── */
.et-sticky-header--active .et_pb_menu .et_pb_menu__menu a,
.et-sticky-header--active .et_pb_menu .et_pb_menu__menu > ul > li > a {
    color: #0d1b2a !important;
}

Paso 5 — El hero (Sección 3) no necesita cambios

La Sección del hero va a quedar inmediatamente después del menú en el Theme Builder. El margen negativo que pusiste en el Paso 2 hace todo el trabajo — el hero sube y queda debajo del menú transparente.

Comparativa: sin efecto vs con efecto

Orden de pasos resumido

1. Abrí el Encabezado Global en el Theme Builder
2. Sección del menú → Contenido → Fondo → Agregar color blanco con opacidad 0%
3. Sección del menú → Diseño → Espaciado → Margen abajo: -80px
4. Sección del menú → Avanzado → CSS De Forma Libre → pegá el CSS de transparente/sticky
5. WordPress → CSS adicional → pegá el CSS de colores de links
6. Guardá todo y probá haciendo scroll

Lo que aprendiste en esta lección