Cómo personalizar el menú móvil de Divi con CSS y animaciones avanzadas

El menú móvil predeterminado de Divi es funcional, pero suele resultar básico y rígido para proyectos que buscan destacar. Transformar esa experiencia de navegación con estilos personalizados y transiciones fluida es clave para mejorar la usabilidad, retener a tus visitantes y dar una imagen profesional desde smartphones.

En esta guía paso a paso aprenderás a personalizar el menú desplegable móvil de Divi utilizando snippet de CSS3 y transiciones de animación, explicados línea por línea para que puedas adaptarlos a la identidad visual de tu marca.

1. Ajustes previos en el Theme Builder de Divi

Antes de aplicar los estilos CSS, es indispensable definir desde dónde estás gestionando la cabecera de tu sitio web:

• Opción A (Recomendada): Cabeza personalizada en Divi Theme Builder. Ve a Divi > Generador de temas (Theme Builder), edita el Encabezado global e inserta un módulo de Menú.
• Opción B: Menú nativo de Divi. Si usas la cabecera por defecto del tema, las clases CSS afectarán al contenedor #mobile_menu.

Para este tutorial trabajaremos sobre la clase nativa de Divi o asignaremos una clase CSS personalizada al módulo de Menú en el Theme Builder: clase-menu-movil.

2. Snippet CSS: Menú desplegable con efecto de deslizamiento y sombra flotante

Añade este bloque de código en Divi > Opciones del tema > General > CSS personalizado (o en la hoja de estilos de tu tema hijo / módulo de Código).

CSS

/* Contenedor principal del menú móvil */
.et_pb_module .et_mobile_menu,
#main-header .et_mobile_menu {
    background-color: #1a1a2e !important; /* Color de fondo oscuro moderno */
    border_top: 4px solid #e94560 !important; /* Acento superior */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important; /* Sombra flotante suave */
    padding: 20px 10px !important;
    border-radius: 0 0 16px 16px !important; /* Bordes inferiores redondeados */
    
    /* Propiedades de animación */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    display: block !important; /* Mantiene la estructura para permitir transiciones */
}

/* Estado activo cuando el menú se abre */
.et_pb_module .et_mobile_menu.opened,
#main-header .et_mobile_menu.opened,
.mobile_nav.opened .et_mobile_menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Estilos de los elementos de enlace */
.et_mobile_menu li a {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: background 0.3s ease, padding-left 0.3s ease !important;
}

/* Efecto Hover al tocar/pasar el cursor por cada elemento */
.et_mobile_menu li a:hover {
    background-color: rgba(233, 69, 96, 0.15) !important;
    color: #e94560 !important;
    padding-left: 28px !important; /* Desplazamiento sutil a la derecha */
}

Explicación del código línea por línea:

• background-color y border-top: Define un fondo oscuro pulido (#1a1a2e) y una línea de acento superior de color rojo/rosado (#e94560).
• box-shadow: Crea una sombra proyectada en la parte inferior para darle profundidad tipo «tarjeta flotante».
• opacity: 0 y transform: translateY(-20px): Mantiene el menú oculto 20 píxeles más arriba de su posición normal antes de activarse.
• transition: all 0.4s cubic-bezier(...): Reemplaza la animación de despliegue tosco por defecto de Divi por un deslizamiento fluido y profesional.
• .opened: La clase .opened la añade Divi mediante JavaScript al hacer clic en el icono de hamburguesa. Al activarse, la opacidad pasa a 1 y la posición vuelve a 0.
• padding-left: 28px: Al interactuar con cada enlace (:hover), el texto se desplaza ligeramente hacia la derecha con un fondo traslúcido.

3. Animación avanzada tipo «Efecto Cascada» (Stagger Effect)

Para dar un toque de diseño avanzado, podemos hacer que los enlaces del menú no aparezcan todos juntos, sino de uno en uno en una secuencia rápida escalonada:

CSS

/* Estado inicial de cada elemento del menú */
.et_mobile_menu li {
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Entrada escalonada al abrir el menú */
.et_mobile_menu.opened li {
    opacity: 1;
    transform: translateX(0);
}

/* Tiempos de retraso por elemento */
.et_mobile_menu.opened li:nth-child(1) { transition-delay: 0.1s; }
.et_mobile_menu.opened li:nth-child(2) { transition-delay: 0.15s; }
.et_mobile_menu.opened li:nth-child(3) { transition-delay: 0.2s; }
.et_mobile_menu.opened li:nth-child(4) { transition-delay: 0.25s; }
.et_mobile_menu.opened li:nth-child(5) { transition-delay: 0.3s; }
.et_mobile_menu.opened li:nth-child(6) { transition-delay: 0.35s; }

¿Cómo funciona este efecto?

Cada ítem individual del menú (li) arranca invisible y desplazado hacia la izquierda (translateX(-15px)). Mediante la pseudoclase :nth-child(), asignamos un retraso progresivo (transition-delay) de 0.05 segundos entre cada elemento, creando una animación de entrada suave e impactante.

4. Animación personalizada para el icono de hamburguesa

También podemos transformar las tres barras tradicionales del icono en una «X» animada cuando el menú está abierto.

Inserta este código en Divi > Opciones del tema > Integración > Encabezado (Head) rodeado de etiquetas <script> o en el módulo de código global:

HTML

<script>
document.addEventListener('DOMContentLoaded', function() {
    var mobileIcons = document.querySelectorAll('.mobile_menu_bar, .et_pb_menu__icon');
    mobileIcons.forEach(function(icon) {
        icon.addEventListener('click', function() {
            this.classList.toggle('icon-active');
        });
    });
});
</script>

Y añade este estilo a tu panel de CSS:

CSS

/* Rotación del icono de hamburguesa al hacer clic */
.mobile_menu_bar.icon-active::before,
.et_pb_menu__icon.icon-active::before {
    content: "\4d" !important; /* Código del icono "X" en la fuente de iconos de Divi */
    transition: transform 0.3s ease !important;
    transform: rotate(90deg);
}

Conclusión

Personalizar el menú móvil de Divi no requiere instalar plugins pesados ni sobrecargar el tiempo de carga de tu sitio web. Con unas cuantas líneas de CSS3 moderno y transiciones bien ajustadas, tu web gana elegancia, mejora la experiencia móvil (UX) y causa una excelente primera impresión en los usuarios.

¿Has aplicado este snippet en tu sitio web? Experimenta cambiando los colores, los tiempos de animación o los bordes para adaptarlo perfectamente al estilo visual de tu marca.