Menú fijo con enlace activo en una One Page en Divi

Inicio / Blog / Snippets / Menú fijo con enlace activo en una One Page en Divi

Autor: Jefferson M

Publicación: 20 May, 2021

En este tutorial te enseñaremos como crear un menú fijo con el enlace activo en una one page o landing page con Divi. La idea es colocar un menú que sea sticky o fijo, y que presente el enlace de la sección donde esté el usuario de otro color, para mostrar que está en esa posición ¿Quieres ver lo que lograrás? checa la DEMO

Índice

Menú fijo con enlace activo en una One Page en Divi

Veamos los pasos para lograrlo.

1.- Colocar un ID personalizado a cada sección de la one page

Lo primero que haremos será identificar con un ID especifico a cada sección del sitio. Esto nos permitirá crear posteriormente el menú. Además de eso, debes darle a cada sección (azul) la siguiente clase de CSS personalizada: color-section

ID CSS en Divi

Debes crear un ID Css único por cada sección para que funcione y también aplicarle la clase CSS personalizada anterior.

Aprende a crear un negocio de diseño web con nuestro curso especializado para creación de negocios de diseño web en uxdivi.

2.- Crear menú ancla para one page en Divi

Ahora debemos crear un menú personalizado. Para ello solo debes ir a la barra de opciones de WordPress > apariencia > menús > crear un nuevo menú.

Luego, vamos a crear un enlace personalizado por cada sección a la que le hemos asignado el ID CSS personalizado antes. Para esto debemos colocar un “#” y luego el “ID CSS” todo junto. Para conocer a detalle como hacer enlaces ancla en Divi puedes ver este otro tutorial gratuito.

Repetimos lo anterior por cada uno de las secciones que queramos anclar en el menú:

Menú personalizado Fijo en Divi

3.- Crear sección fija o sticky con menú personalizado

Dentro de nuestra one page, debemos crear y personalizar el menú que queremos que quede fijo en el sitio. Para esto solo debemos crear la sección, una fila y dentro de si, el menú con un módulo de menú de Divi. Esta sección debe ser Sticky.

Para esto, es importante tambien que en las configuraciones de la página que tenemos como one page, le asignemos a los atributos de la página, la platillo “Blank Page”.

¿Quieres aprender a hacer menús personalizados geniales con Divi? Aprende con todos nuestros tutoriales premium de menús personalizados en Divi.

Además debemos asignarle la siguiente clase a nuestro módulo menú de Divi: color-activo-menu-scroll

Dentro de esta sección, vamos a añadir un pequeño snippet que nos dará la funcionalidad del menú fijo con enlace activo. Esto lo debemos añadir en un módulo de código:

<script>
// Activar menú al hacer scroll
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>
Script personalizado

4.- Colocamos el CSS personalizado del enlace activo en el menú

Finalmente, colocamos un pequeños CSS personalizado dentro de las opciones de la página para asignar el color del enlace activo al menú fijo.

El CSS es el siguiente:

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

Acá solo debes cambiar el color hexadecimal por el de tu preferencia. Recuerda que este color será el color del enlace activo en el menú.

CSS personalizado

¡Y listo! ¿Te ha gustado este tutorial?

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este post.

Nos vemos en el próximo tutorial de uxdivi.

10 Comentarios

  1. Jerry

    Excelente, lo que estaba buscando hace buen tiempo

    Responder
    • Jefferson M

      Super! Gracias por proponer en las ideas para contenido 😊

      Responder
  2. Elvis

    Es posible hacer que funcione pero teniendo en la sección dos menus? uno principal y otro secundario? si aplicas el tutorial teniendo dos menus no funciona

    Responder
    • Jefferson M

      Así es Elvis, no se puede con dos menús, solo con uno.

      Responder
  3. Gustavo

    donde encuentro la segunda parte del tutorial, para el menu de dispositivos mobiles ?

    Responder
  4. Maurizio

    Hola y si tengo varias paginas y quiero que el color de los enlaces cambien segun las paginas del menu?

    Responder
    • Jefferson M

      Que tal Mauricio, esto lo puedes lograr de forma nativa dándole los ajustes al menú cambiando el color de la página activa. Todo esto al módulo de menú de Divi.

      Responder
  5. Maurizio

    Si vi el modulo pero aun asi no cambia el color cuando está activa

    Responder
    • Jefferson M

      Debe faltar alguna configuración Maurizio, o quizá hay algún conflicto de CSS. Podemos ayudarte a revisar el problema a fondo desde soporte prémium de nuestra plataforma si eres suscriptor de uxdivi.com. Al ser una duda tan concreta debe revisarse a detalle.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

2 + 2 =