Cerrar video

Crear un menú fijo transparente con divi theme builder que cambie a un color al hacer scroll o desplazarse

por | May 3, 2020 | Tutorial gratuito | 66 Comentarios

Hola qué tal, en este tutorial aprenderás a crear un menú fijo (fixed) que cambie de color al hacer scroll o desplazarse. Esto es algo que siempre se ha podido realizar con el «antiguo» divi desde el personalizador de temas pero en este tutorial te enseñaré como realizarlo con el nuevo generador de temas de divi, mejor conocido como divi theme builder que viene con Divi 4.0 o superior.

Este tutorial me lo ha solicitado más de un suscriptor en nuestra comunidad de facebook (sí aún no eres parte del grupo, qué estás esperando para unirte).

El ejercicio de este tutorial consiste en crear un menú personalizado con fondo transparante que se mantenga fijo al hacer scroll y cambie a un color cuando te empieces a desplazar sobre la página. ¿Suena interesante verdad? Pues con divi y wordpress es posible realizar este efecto, solamente vamos a necesitar un pequeño fragmento de código jquery para echarlo a andar.

Fiel a la costumbre de OV Divi en esta entrada te dejo el código que utilizaremos para que solo copies y pegues 🙂

Primero te dejo código jQuery que tienes que pegar en las opciones del tema divi / Integración / Agregar código al <head> de su blog:

jQuery(document).ready(function( $ ) {
  $(window).scroll(function(){
  	var scroll = jQuery(window).scrollTop();
	  if (scroll >= 100) {
	    $("#menuFijo").addClass("menu-color-fijo-scroll");
	  }

	  else{
		$("#menuFijo").removeClass("menu-color-fijo-scroll");  	
	  }
  });
});

Posteriormente tenemos que pegar este código css en el CSS personalizado de divi:

#menuFijo {
  background-color: transparent;
  transition: background-color 0.5s ease;
}

.menu-color-fijo-scroll {
	background-color: rgba(0,0,0,0.9)!important;
  transition: background-color 1s ease;
}

Si te quedó alguna duda, puedes escribirla en los comentarios y yo estaré encantado de responderte.

Te mando un abrazo y suscríbete al canal si no lo haz hecho.

Tutoriales Relacionados

66 Comentarios

  1. jose

    Hola , si tengo dos menus pero solo quiero mostrar uno cuando hago scroll , ¿como lo puedo hacer?, muchas gracias

    Responder
    • Oscar Viedma

      Hola José, trabaja el módulo por sección, cada menú que este dentro de su propia sección y cuándo se desplace hacía arriba que solo se quede uno. ¿Cuál quieres mostrar? el de arriba o el de abajo?

      Responder
      • jose

        Realmente son 3 menus,

        Menu 1 y menu 2 deben mostrarse en un principio pero cuando se haga scroll solo se debe mostrar el menu 3

        Responder
        • Oscar Viedma

          Tienes tu sitio en línea, para darle un vistazo, se me hará más fácil ayudarte.

          Responder
  2. Francisco

    Hola espero estés bien…
    Sabes me gustaría que hicieras un tutorial de como conectar mi formulario (de cualquier tipo) con una tabla nueva en la base de datos.

    Responder
  3. will

    Hola Oscar. Gracias por el excelente tutorial, me gustaría saber si hay forma de hacer que cambien también de color el logo y el color del menú al hacer scroll.
    Me podrás orientar si hay algún tutorial para esto.

    Muchas gracias por tu pronta respuesta

    Saludos

    Responder
    • Oscar Viedma

      Hola qué tal Will. Acabo de responder tu comentario en el video de youtube. Tengo un comentario fijo y ahí doy solución a tu respuesta.

      Un abrazo.

      Responder
  4. DIEGO DE LA TORRE

    Hola Oscar, un favor podrias explicarme como puedo cambiar para que inicialmente el menu sea digamos color azul, luego por hacer scrol se cambie a blanco, en resumen tener dos colores solidos no transparente, intente cambiando en el color inicial del menu pero no me funciona

    Responder
    • Oscar Viedma

      Hola Diego. Es muy fácil solamente cambias los valores del código CSS, ejemplo:

      #menuFijo {
        background-color: #002D60; /* color fondo inicio */
        transition: background-color 0.5s ease;
      }
      
      .menu-color-fijo-scroll {
        background-color: #ffffff !important; /* color fondo scroll */
        transition: background-color 1s ease;
      }
      
      body .menu-color-fijo-scroll .et_pb_menu_0_tb_header.et_pb_menu ul li a {
        color: #002D60 !important; /* color de la tipografía al hacer scroll */
      }
      
      Responder
  5. CRISTIAN BECQUER BERNARDO GUTIERREZ

    es una chulada

    Responder
  6. Gabriela Cordero

    Hola, el logotipo no es cliqueable, no me lleva a la página de inicio. ¿Cómo puedo hacerlo?

    Responder
    • Oscar Viedma

      Hola Gabriela debes colocarle un enlace en los ajustes del módulo. 🙂

      Responder
  7. Jose

    Hola Oscar!!

    Gracias por este tutorial!!. Combine este tutorial con el de «Ocultar menú al desplazarse hacia abajo»

    Lo unico que no esta funcionando es la linea de «transition: background-color 1s ease;»

    Parece que el «transition: top 0.5;» bloquea la funcion.

    Mi intencion es tener un menu transparente hasta arriba de la pagina, que al hacer (scroll down) se esconde y al hacer (scroll up) reaparezca con un fondo diferente, y al subir toda la pagina hacer un ease out de regreso a transparente.

    Justo el ultimo paso no lo he podido completar.

    Seria genial si me pudieras ayudar 🙂

    Gracias por tu trabajo

    Responder
    • Oscar Viedma

      Hola José qué tal, si me compartes la url de tu sitio podría darle un vistazo. Igual sería bueno que me dieras acceso a tu sitio para que desde allí realice mis pruebas. Escríbeme a [email protected]

      Saludos

      Responder
  8. Rox

    Hola, excelentes tutoriales. Yo segui los pasos del video pero por alguna razon no me funcionan los submenus ni el menu hamburguesa, veo una linea pero no los item de los submenu…la parte peor es que trabajè con el unico menu que tenia y ahora no se como deshacer los cambios. Si amplio la separacion en los margenes del menu si me muestra los submenus pero se ve muy feo asi =( como puedo regresar al menu que tenia antes y/o hacer que se muestren los submenus sin tener que ajustar los separadores ? muchas gracias de antemano.

    Responder
    • Oscar Viedma

      Hola Rox muchas gracias. Podrías compartirme el enlace de tu sitio para ver que sucede. También puedes hacer prácticamente lo de este tutorial con la nueva opción de divi sticky, puedes ver el tutorial desde aquí.

      Si quieres deshacer cambios divi viene con una opción llamada Historial de Ediciones puedes deshacer cambios desde allí, tienes que habilitar el constructor visual y en la parte inferior encuentras la opción. También wordpress viene con una opción que se llama revisiones, entras a editar página y allí viene el historial de cambios.

      Responder
  9. Gabriela

    Hola, tengo el menú perfectamente configurado (gracias, ha funcionado muy bien), pero ahora debo cambiar el logotipo por uno más grande lo que me obliga a tener que incluir el efecto de achicar al desplazarse. He seguido el tutorial «Cómo crear un menú fijo que se haga más pequeño al desplazarse con divi theme builder» pero algo de lo incluído en este tutorial no me deja aplicar la función. Si sigo el otro tutorial, también quiero el fondo de color al hacer scroll. ¿Me puedes ayudar?

    Responder
      • Gabriela

        ¡Muchas gracias! Ha sido muy útil, además que tu explicación es muy clara y rápida. Finalmente he usado sticky para reducir el logotipo al hacer scroll, pero pienso que el cambio es muy brusco, casi como un salto…¿es posible suavizar ese movimiento? Gracias de nuevo.

        Responder
        • Oscar Viedma

          No estoy seguro de poder suavizar el movimiento con la forma en que lo has hecho. Pero podrías hacerlo con el método que lo hago en el tutorial que te compartí. Saludos.

          Responder
  10. Adolfo Quiroga

    Excelentes videos Oscar. Aprendo mucho de ellos. Sabes que por un error o algo asi de Divi o de lo que estuve haciendo se me desaparecieron los productos dentro de mi tienda, en el visualizador y en la página obviamente, pero no así en mi escritorio de WordPress. Que pudo haber pasado? Gracias.

    Responder
    • Oscar Viedma

      Hola Adolfo qué tal, podría deberse a la cache. Dirígete a Divi > Opciones del tema > Constructor > Avanzado y desactiva la generación de CSS Estático a ver si con esto se soluciona el problema. También podría deberse que hayas cambiado la url de la tienda, tampoco sé cómo creaste la página de la tienda, si desde el generador de temas o estás usando la que viene por defecto con divi, en fin, hay muchas cosas que podrían estar causando el problema.

      Un abrazo Adolfo.

      Responder
  11. Adolfo

    Es que generé los CSS de tu vídeo de menú transparente, sera eso?

    Responder
    • Oscar Viedma

      No tiene porque darte problemas este tutorial. Algo ando mal en tu web. ¿Cuál es la url?

      Responder
      • Adolfo

        academiadebaristasj.com

        Responder
        • Oscar Viedma

          Hola Adolfo he visitado tu sitio y los productos se muestran correctamente. Creo que ya lograste solucionarlo.

          Responder
          • Adolfo

            Gracias, pasó que la página Tienda la genera automáticamente Woocommerce, pero al editarla con el Visualizador de Divi te lleva a construirla desde cero. Y ahí te impide ver los productos.

  12. marta b

    hola Oscar, genial todos tus videos… aqui algo he hecho mal porque no me cambia al menu oscuro. sigue saliendo trasparente y no se como hacerlo lo he repetido tres veces y sigue sin salir
    Estoy creando una web de viajes me he apuntado a tu curso como tal, pero estoy adaptandola a mi gusto poniendo este menu que me parece muy chulo
    podrias ayudarme
    http://viajesdq.local/nosotros/?et_fb=1&PageSpeed=off

    Responder
    • Oscar Viedma

      Hola Marta qué tal, ¿Cómo vas con el problema que comentas? El enlace que me compartes no lo puedo ver porque es un enlace de local y solo está disponible para ti. Si quieres cuándo tengas tu sitio en línea te ayudo con el problema 🙂

      Responder
  13. Emilio Muñoz

    Hola Oscar, Muy buenos los tutoriales muchas gracias. Fijate que tengo el siguiente problema, cuando creo el encabezado desde el generador de temas y le coloco el fondo transparente. cuando entreo a las paginas siempre me aparece el fondo blanco. Me refiero a que las paginas inician despues de el encabezado, por lo que no tengo ese efecto de transparencia. que podre hacer.

    Responder
  14. claudio

    Hola Oscar, primero te doy la gracias por los tutoriales me han servido mucho.
    ahora te cuento el problema.
    Al elegir el menú, en el panel de configuración, este me arroja un menú con un campo de búsqueda y se alinea todo verticalmente. No puedo saber de donde sale ese campo.

    Responder
    • Oscar Viedma

      Hola Claudio. Recuerda que debes crear tu menú desde Apariencia > Temas. También revisa que tu tema no tenga un plugin o código qué esté causando el conflicto. También puedes compartirme la url para que le de una revisada.

      Saludos Claudio.

      Responder
  15. claudio

    Hola Oscar, si el menú lo cree desde la opción apariencia. Estaba trabajando con safari, es ahí donde se ve mal el menú. Luego lo trabaje desde firefox y se ve todo bien. ¿ cuál será el problema?.

    Saludos.

    Responder
    • Oscar Viedma

      Seguramente se debe a los prefijos CSS, los navegadores se comportan de manera diferente. Pero como mencionas que lo hiciste Desde Apariencia seguro el «error» viene de divi. ¿Por qué no lo intentas con el generador de temas?

      Responder
  16. Seabstian

    Hola Oscar muy tutorial, quisiera que al hacer scroll el fondo quede en degradado mitad negro y mitad transparente pero no logro dar con el código CSS, ayuda 🙁

    Responder
    • Oscar Viedma

      Hola Sebastián muchas gracias.

      Para usar degradados te recomiendo esta página para que generes el código de color desde allí y posteriormente se lo colocas en el CSS .menu-color-fijo-scroll { … }

      Responder
  17. florencia

    Hola! Como hago si quiero que el menú fijo aparte de tener una transparencia, se multiplique?

    Responder
    • Oscar Viedma

      Hola Florencia, ¿A qué te refieres con que se multiplique? No lo entiendo muy bien Florencia.

      Responder
  18. Gabriela

    Este menu funciona muy bien en el computador pero no permite ingresar un script normal para hacer que el menú en la vista móvil sea colapsable, como lo hacía antes con el menú normal de Divi. ¿Qué código debería ingresar para que mi menú móvil esconda y muestre los ítems de submenu? ¡Gracias por toda tu ayuda!

    Responder
    • Oscar Viedma

      Hola Gabriela, esa funcionalidad que deseas no la incluye divi por defecto pero se puede hacer con algunos script, mira este post y seguro lo logras. Ten en cuenta el código es diferente dependiendo si estás utilizando el menú del personalizador de temas o un menú realizado desde el generador de temas, en el post vienen los dos fragmentos.

      Saludos.

      Responder
  19. Gabriela

    Buenas,

    Ante que todo te felicito por tu tutorial que está perfectamente explicado. Lo que me gustaría saber como podría hacer para que el menú desde el inicio tenga un color y que al bajar se coloque como gris transparente y no negro.

    Muchísimas Gracias

    Responder
    • Oscar Viedma

      Hola Gabriela, muchas gracias.

      Para cambiar el color debes cambiar los valores de background-color en el código CSS, por ejemplo en lugar de:

      background-color: transparent;

      Puedes colocar un color así:

      background-color: #000000;

      Es cosa de que solo reemplaces el valor hexadecimal.

      Responder
  20. Daniel

    Hola Oscar,
    Tengo un problema con el menú en formato móvil y tablet, ya que el espacio del menú «se come» la primera sección que tiene contenido (queda dentro del meny u no puede verse bien. Esto solo sucede en Tablet y móvil.)

    alguna idea o tip para que el contenido empiece justo después del menú?
    Muchas gracias!

    Responder
    • Oscar Viedma

      Hola Daniel, a ver compárteme la url de tu sitio web para darle un vistazo 👀

      Responder
      • Daniel

        Hola Oscar!
        justo vi esto por aqui y prefiero seguir por la zona privada de tu academia, sorry no haber avisado antes. Te consulto por allá. Gracias!

        Responder
  21. Gustavo

    Hola Oscar, como estas?
    Tengo un pequeño inconveniente con este encabezado

    Me indica un error en esta linea del jQuery cuando pego el código en las opciones del tema divi / Integración / Agregar código al de su blog:

    if (scroll >= 100) {

    Dice esto: Special characters must be escaped : [ > ].

    Cómo puedo escribirlo? No funciona en el sitio https://solsistemas.com.ar/stage/
    Muchismas Gracias

    Responder
    • Oscar Viedma

      Hola Gustavo, ¿Cómo vas con este inconveniente? Si colocaste las etiquetas script?

      Responder
  22. Domingo Goyarzu

    Utilice este tutorial con exito en un sitio, pero se decidio cambiar el tema de divi por el peso del sitio y ahora tiene Page Builder Framework como tema y usamos el divi builder. Intente replicar lo aqui indicado, cree el menu transparente, agrege el CSS adicional y agrege el codigo al header mediante el plugin Head Footer and Post Injections, ya que el tema actual no ofrece tal opción. desafortunadamente no parece funcionar….. en algun momento de ve el header pero no como estaba originalmente…. tienes algun tutotial o alguna sugerencia bajo este ambiente? espero que puedas orientarme

    Responder
    • Oscar Viedma

      Hola Domingo, todos los tutoriales están enfocados al tema divi pero considero no debes tener ningún problema usando el plugin divi builder, el efecto debe funcionar por igual.

      Si aún tienes aplicado el efecto me gustaría ver la url de tu ejercicio. ¿Cuál es?

      Responder
  23. Alberto

    hola, muchas gracias por el contenido, quería preguntar si a la fecha actual esto funciona, ya que al realizar los pasos no me genera ningún cambio.

    Responder
    • Oscar Viedma

      Hola Alberto, si todos los tutoriales que tengo a la fecha funcionan, solamente es recomendable utilizar esta configuración en divi performance.

      Responder
  24. Domingo Goyarzu

    Hola Oscar, tengo una preguntamque espero puedas ayudarme. Tengo un sitio multilenguaje, ingles y español, cada uno tiene un menu diferente, como puedo hacer este efecto sin tener que utilizar el Theme builder? intente hacelo siguiendo los settings en la seccion donde tengo el menu en ingles, pero no funciona el cambio de color al hacer el scroll. como puedo hacer esto? Espero puedas orientarme. Saludos… Domingo Goyarzu

    Responder
    • Oscar Viedma

      Hola qué tal Domingo, este menú debe crearse desde el theme builder. Si lo necesitas multi lenguaje tienes que hacerlo en dos plantillas desde el generador de temas y asignarlos a las páginas en su idioma correspondiente.

      Responder
  25. alejandroverjel.com

    Oscar resulta que cuando tienes otra sección en la parte superior del menu, ya el efecto de scroll que pasa a negro ya no funcionaria. solo aplica cuando tienes solo el menu. lo intente poniendo la franja superior (por defecto) y el menu fijo y no funciona que el fondo del menu transparente y que pase a negro. sabes alguna solución cuando tienes dos secciones para que pueda funcionar con tu script?

    Responder
  26. Domingo Goyarzu

    Muchas gracias por tu respuesta…… debo entonces tener dos pantillas, cada una asociada al nombre de menu en el idioma que corresponda? voy a intentar hacerlo de esta manera…. te confirmo si funciona pero estoy seguro que si……

    Responder
  27. Francisco Chávez

    Hola Oscar quería saber si este tutorial aun funciona con las ultimas actualizaciones de DIVI y WordPress

    Responder

Enviar un comentario

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

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest