Menú fijo con enlace activo en one page con Divi

Un menú fijo (sticky) que resalta el enlace de la sección donde está el usuario es una funcionalidad clásica de las landing pages y sitios one page. En Divi puedes lograrlo sin plugins de terceros, combinando la opción sticky nativa, un menú de enlaces ancla, un pequeño snippet de jQuery y tres líneas de CSS. En este tutorial te mostramos el proceso completo.

Ver Demo en vivo →

One page vs multi-page: cuándo usar cada uno

El menú con enlace activo tiene más sentido en el formato one page, donde el usuario navega verticalmente y el menú actúa como guía visual de su posición en el documento.

Paso 1: Asignar IDs CSS a cada sección

Lo primero es identificar cada sección de la one page con un ID CSS único. En las opciones de la sección en Divi, ve a Avanzado → ID CSS y escribe el identificador de esa sección. Por ejemplo:

• Sección hero → inicio
• Sección servicios → servicios
• Sección sobre nosotros → nosotros
• Sección contacto → contacto

Además, agrega la clase CSS personalizada color-section a cada sección que debe activar el resaltado del enlace correspondiente al llegar a ella.

Paso 2: Crear el menú de enlaces ancla

Ve a WordPress → Apariencia → Menús → Crear nuevo menú. Para cada sección, añade un enlace personalizado con:

• URL: #inicio, #servicios, #nosotros, #contacto (el símbolo # seguido del ID que definiste).
• Texto del enlace: el nombre que verá el usuario en el menú.

Para una guía detallada de cómo funcionan los enlaces ancla en Divi, consulta ese tutorial específico.

Paso 3: Crear la sección sticky con el módulo de menú

En tu página one page, crea una nueva sección en la parte superior para el menú. Dentro de ella, coloca una fila con el módulo de menú de Divi y selecciona el menú de anclas que creaste.

Para que la sección quede fija al hacer scroll, activa la opción Sticky de Divi en las propiedades de la sección (Avanzado → Posición → Sticky). Configura el sticky para que se active al llegar al top de la ventana.

Asigna la clase CSS color-activo-menu-scroll al módulo de menú (no a la sección, sino al módulo en sí). Esta clase es la que usará el script de jQuery para saber en qué menú debe cambiar el color del enlace activo.

También es importante asignar la plantilla "Blank Page" a la página one page en sus atributos de página, para eliminar el header y footer del tema que competirían con el menú personalizado.

Paso 4: Agregar el script jQuery para el enlace activo

En la misma sección del menú, agrega un módulo de código e inserta el siguiente script:

<script>
jQuery(document).ready(function( $ ) {
  $(window).scroll(function() {
    var position = $(this).scrollTop();

    $('.color-section').each(function() {
      var target = $(this).offset().top - 160;
      var id     = $(this).attr('id');

      if (position >= target) {
        $('.color-activo-menu-scroll .menu-item a').removeClass('item-activo');
        $('.color-activo-menu-scroll .menu-item a[href="#' + id + '"]').addClass('item-activo');
      }
    });
  });
});
</script>

El valor 160 en offset().top - 160 es el offset del menú sticky. Si tu menú tiene una altura diferente, ajusta ese número para que el cambio de enlace activo ocurra justo cuando la sección llega al borde inferior del menú, no al top del viewport.

Paso 5: Agregar el CSS del enlace activo

En las opciones de la página → CSS personalizado (o en el Divi Theme Customizer), agrega:

.page .color-activo-menu-scroll .item-activo {
  color: #f7c324 !important;
}

Reemplaza #f7c324 por el color de tu marca. Puedes también agregar un subrayado, un fondo o cualquier otro estilo CSS para el estado activo.

Cómo activar el smooth scroll

Por defecto, al hacer clic en un enlace ancla la página salta abruptamente a la sección. Para un scroll suave, agrega esto en el CSS personalizado:

html {
  scroll-behavior: smooth;
}

Si prefieres controlar la velocidad del scroll con jQuery (más opciones de easing), puedes usar el plugin jQuery Smooth Scroll o un snippet adicional con $.fn.scrollTo.

Ajuste del offset en móvil

En dispositivos móviles el menú sticky suele ser más delgado o puede ocultarse. Si el offset de 160px es incorrecto en móvil, puedes ajustar el valor con una variable CSS o con un condicional en jQuery que detecte el ancho de la ventana:

var offset = $(window).width() < 768 ? 80 : 160;

¿Quieres aprender a crear menús avanzados, mega menús y navegación personalizada en Divi? Nuestro curso de menús y mega menús en Divi cubre todos los casos de uso con tutoriales detallados.

Accesibilidad del menú one page: lo que no debes pasar por alto

Un menú de enlaces ancla bien hecho debe funcionar también para usuarios que navegan con teclado o lectores de pantalla. Algunos puntos a considerar:

• Focus visible: asegúrate de que el outline de foco del enlace activo no quede oculto por el CSS personalizado. El estilo outline: none en los links del menú es una mala práctica de accesibilidad que debes evitar.
• Atributos ARIA: en el módulo de menú de Divi, el menú de navegación ya incluye role="navigation" y aria-label por defecto. Verifica que no hayas eliminado estos atributos al personalizar el módulo.
• Skip link: para usuarios de teclado, agrega un enlace "Saltar al contenido principal" al inicio de la página que lleve directamente a la sección principal, saltando el menú sticky.
• Prefers-reduced-motion: si tu menú activa animaciones de scroll suave, respeta la preferencia del sistema del usuario con la media query @media (prefers-reduced-motion: reduce) para desactivar el smooth scroll en quienes lo tengan configurado.

Preguntas frecuentes sobre menú one page en Divi

¿Funciona este método con Divi 5?

La estructura de secciones, filas y módulos es compatible con Divi 5. El script jQuery sigue funcionando porque jQuery está incluido en WordPress. Las opciones de CSS (ID, clase) se configuran de la misma manera en Divi 5.

¿Puedo usar esto en una página con header y footer normales?

Sí, pero debes ajustar el offset del script para que tenga en cuenta la altura del header fijo del sitio además del menú one page. En ese caso, puede ser más sencillo usar un único menú sticky que actúe como el único elemento de navegación visible.

¿El cambio de enlace activo afecta el SEO?

No. La clase item-activo se agrega y quita con JavaScript en el cliente, sin modificar el HTML del servidor. Los bots de Google no ejecutan scroll, por lo que nunca ven el estado activo del menú.

¿Puedo tener más de un menú one page con este método en la misma página?

Sí, siempre que uses nombres de clase distintos para cada menú (color-activo-menu-scroll-2, etc.) y dupliques el script con los selectores correspondientes.

Conclusión

Con cuatro pasos — IDs en secciones, menú de anclas, sección sticky y script jQuery — tienes un menú fijo profesional con enlace activo en cualquier one page de Divi. El resultado es una navegación clara que guía al usuario por el contenido y refuerza la experiencia de la landing page. El CSS del enlace activo es completamente personalizable para adaptarse a cualquier diseño.