En este tutorial premium y único de los tutoriales exclusivos de la Academia OV DIVI aprenderás a crear una funcionalidad que consiste en cambiar o reemplazar el logo y color de los enlaces del menú dependiendo la sección al hacer scroll en nuestros sitios web creados con divi.
Hay ocasiones que queremos mantener fijo el header de nuestro sitio web, pero muchas veces en nuestra página estamos implementando fondos claros y oscuros en diferentes secciones, por lo tanto, si nuestro logotipo es blanco éste se perderá con las secciones del mismo color y si nuestro logotipo es negro también se perderá con las secciones con fondo de color oscuro. Es aquí dónde entra la funcionalidad que aprenderás el día de hoy ya que gracias a unos fragmentos de código seremos capaces de reemplazar el logotipo y color de los enlaces dependiendo la sección en la que nos encontremos al ir haciendo scroll o desplazarnos sobre la página.
Realmente es una funcionalidad que te vendrá bien en más de un proyecto, ya que este detalle es muy común que nos pase en nuestros sitios web. Así que si quieres aprender a implementar esta funcionalidad te espero dentro de los tutoriales exclusivos.
Un abrazo.
ACTUALIZACIÓN: Tutorial liberado gratis para el canal de youtube. (17/11/21)
RECURSOS:
> Enlace a la demo
> Descargar los assets
CÓDIGOS:
jQuery para activar la funcionalidad de cambio de logo y color de los enlaces (recuerda que el código debe ir dentro de las etiquetas script):
(function($){
$(window).on("scroll touchmove", function() {
if ($(document).scrollTop() >= $("#seccion1").position().top) {
$( ".cambiar-logo img" ).attr( "src", "#" );
$( "#menuPrincipal .et_pb_menu__menu a" ).attr('style', 'color: #fff !important');
};
});
})(jQuery)
Código CSS para el color del menú hamburguesa en móvil:
.hamburguesa-blanco:before {
color: #fff !important;
}
.hamburguesa-negro:before {
color: #000 !important;
}
Línea de código jQuery para cambiar el color del icono hamburguesa en móvil:
$( "#menuPrincipal .mobile_menu_bar" ).attr('class', 'hamburguesa-blanco mobile_menu_bar');
Hola Oscar! Excelente vídeo desde ya!
Quería hacerte una consulta. Todo me funcionó perfectamente pero, me gustaría saber cómo poder cambiar el color entre secciones para un módulo de texto.
Tengo el ícono de hamburguesa del menú puesto en un módulo de texto ya que lo trabajé con código.
Te agradecería demasiado que me pudieras explicar por favor cómo hacerlo mediante el módulo de texto.
Un abrazo!
Hola Jorge, ¿Quieres cambiar el color entre secciones? ¿o cambiar el color del icono hamburguesa que tú haz realizado?
¿Cuál es la url de tu web?
Hola, y para poder cambiar el color del texto de algún botón del menú como seria? ya lo intente y no me funciono
hola Jesi, se tiene que identificar la clase para poder cambiar el color del texto del botón. Si me compartes la url de tu web puedo apoyar con el código.