Hola en este tutorial aprenderás a diseñar un menú fijo que se hará más pequeño al desplazarnos sobre la página, es decir, los elementos de nuestro header o encabezado se encogerán una vez hagamos scroll hacía abajo.
Este es un efecto que por defecto lo podemos hacer con el personalizador de temas de divi, pero en esta ocasión lo haremos con el divi theme builder o el generador de temas de divi ya que de esta manera tenemos más libertad a la hora de diseñar nuestros encabezados personalizados.
La verdad me esperé mucho para realizar este tutorial ya que Nick Roach (fundador de divi) hace semanas comentó que una de las próximas actualizaciones de divi serían los «Divi Sticky» y con esta nueva actualización vamos a poder realizar este tipo de efectos de forma más práctica con divi. Ésta es la principal razón por la que no me animaba a grabar este tutorial a pesar de que muchos de ustedes me lo habían estado pidiendo.
Pero ya esperé tanto que llegué a desesperarme y mejor decidí grabar este tutorial de una vez sin importar que en un futuro podamos realizar este efecto con el divi builder por defecto. De todas formas en este tutorial vamos a realizar otros truquitos sobre la marcha que seguro te servirán en tus proyectos, así que no hay nada de desperdicio. ¡Qué disfrutes este video!
A continuación te dejo los fragmentos de código que vamos a utilizar en este tutorial para que solo copies y pegues.
Fragmento para centrar verticalmente los elementos dentro de la fila:
display: flex; align-items: center; justify-content: center;
Fragmento jQuery para no superponer el menú fijo sobre la sección:
// No superponer el menu fijo
jQuery(function($){
var headerSection = $('.seccion-menu');
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
var headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
$(window).resize(function() {
headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
});
});
Fragmento jQuery para reducir los elementos de la sección menú al hacer scroll:
// Reducir elementos de la sección menú al hacer scroll
jQuery(document).ready(function( $ ) {
$(window).scroll(function(){
var scroll = jQuery(window).scrollTop();
if (scroll >= 80) {
$(".seccion-menu").addClass("seccion-menu-scroll");
}
else{
$(".seccion-menu").removeClass("seccion-menu-scroll");
}
});
});
Estilos CSS para la sección menú:
/* Estilos menu ov divi */
.seccion-menu, .seccion-menu .et_pb_image img,
.seccion-menu .et_pb_menu ul li a,
.seccion-menu .et_pb_button {
transition: all .3s ease;
}
.seccion-menu.seccion-menu-scroll {
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3)!important;
padding-top: 10px !important;
padding-bottom: 10px !important;
transition: all .3s ease;
}
@media only screen and (min-width: 768px) {
.seccion-menu.seccion-menu-scroll .et_pb_image img {
height: 40px !important;
transition: all .3s ease;
}
.seccion-menu.seccion-menu-scroll .et_pb_menu ul li a {
font-size: 16px !important;
transition: all .3s ease;
}
body #page-container .seccion-menu.seccion-menu-scroll .et_pb_button {
background-color: #ff8e60 !important;
color: #ffffff !important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
}
/* Estilos botón llamada a la acción menú hamburguesa */
body #page-container .btn-principal {
margin: 14px 10px 10px 10px;
}
body #page-container .btn-principal a {
color: #ffffff !important;
border-color: #ff8e60 !important;
background: #ff8e60 !important;
border-radius: 100px;
letter-spacing: 1px;
text-transform: uppercase!important;
padding: 12px 25px 10px 25px;
}
Estilos CSS para algunos ajustes en el menú móvil:
/* Ajustes responsive menú móvil */
@media only screen and (min-width: 981px) {
.btn-principal {
display: none !important;
}
}
@media only screen and (max-width: 980px) {
.seccion-menu .et_pb_menu__wrap {
justify-content: flex-end !important;
}
}
.et_mobile_menu {
margin-top: 10px;
width: 200%;
margin-left: -100%;
}
/* Cambiar icono hamburguesa a "X" cuando esta abierto */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
Excelente, me sirvió mucho para un proyecto que estoy realizando. Llevaba días probando formas, incluso perdí dinero con un plugin que no sirvió para nada de lo que ofrecía (lamento mucho eso…) y justo cuando estaba por tirar la toalla aparece tu video en youtube, en serio muchas gracias Oscar! 👏👏👏👏👏
Jorge acabo de leer tu comentario en youtube y me parece excelente que este tutorial te haya solucionado los problemas que tenías con el menú en móvil. De eso se trata amigo, me alegra leer comentarios como el tuyo. ¡Nunca tires la toalla! 💪 Te mando un abrazo Jorge.
hola oscar, muchas gracias por el tutorial, solo una consulta como lo hago para que el sub menú quede con un signo + y no abierto completo, saludos… gracias
Hola Claudio. Para lograr lo que deseas sigue este tutorial de elegant themes, ahí tienes la respuesta.
Hola de nuevo Oscar, no me apruebes este comentario ni el que está abajo. ya encontré la falla 🙈 . Disculpa las molestias. Y gracias por compartir tus conocimientos y ese tutorial de Divi. Un abrazo
Hola Carlos qué tal amigo jaja Genial que lo has logrado, apenas te iba a dar mi respuesta.
Cualquier otra duda me dices.
Un abrazo.
Hola Oscar, el layout de este tutorial se puede cnseguir si me suscribo a los tutoriales premium?
Muchas gracias, me encantan tus proyectos
Hola qué tal, la realidad es que para los tutoriales gratuitos no guardo los json. Pero deja ver si lo tengo por allí y te comento.
Hola Oscar, te sigo en tus canales y redes. La verdad tu material es de primera.
Tenía que resolver algunas cuestiones, desp de más de 10 años estoy volviendo al diseño web de la mano de WordPress y Divi, y fué un salto enorme desde el html y los css, pero gracias a tutoriales como los tuyos puedo entender, desarrollar y crecer en mis conocimientos, humildemente empecé con mi web y bueno, ahora ya intentando modificaciones para mejorar. Gracias Totales desde Buenos Aires.
Genial Rodolfo, muchas gracias por seguirme 🙂
Así es Rodolfo, la web avanza a pasos agigantados y cada vez hay más y más herramientas para el desarrollo. WordPress + Divi es una excelente porque básicamente puedes hacer cualquier cosa ahorrándote mucho tiempo. Espero y todos los tutoriales te sirvan y te ayuden para tus proyectos. Seguiremos aportando mucho contenido Rodolfo, así que siempre atento al blog y al canal de youtube.
Te mando un abrazo hasta Buenos Aires 🙂
Hola! cuando el menú por defecto de divi tiene subítems, éstos se despliegan uno arriba del otro abriéndose abajo hacia a la izquierda o a la derecha dependiendo de la posición del ítem de menú padre. En mi caso tengo un menú de sólo un ítem muy pegado a la derecha que despliega varios subítems que se despliegan a su vez a la derecha, saliendo de la pantalla. El sistema por defecto no funciona en este caso ya que normalmente se muestran hacia la izquierda si es que no hay espacio disponible. No encuentro los estilos involucrados. Me podrías ayudar?
Hola Gabriela qué tal, podrías intentar pegando el siguiente fragmento de código en Apariencia / CSS adicional:
#top-menu > li:last-child .sub-menu { position: absolute; right: 0; }Hola porque en iPhone se me esconde solo el menú cuando llego a la parte superior pero en otros dispositivos Android y pc el efecto si funciona correctamente gracias por los vídeos espero me ayudes
Hola Yaca ¿Cual es la url de tu web? Quiero probarla desde mi iPhone para ver lo que comentas
Hola! gracias! pero no ha resultado con el código. En realidad no puedo ver, al menos en el inspector, el ID #top-menu para el menú en particular. Este menú se comporta de formas diferente al menú por defecto, ya que por ejemplo, tampoco se despliega a todo el ancho en la vista del celular.
Compárteme tu sitio para entender mejor que sucede. A ver si descubro el código.
Hola! Es https://vivenavidad.cl/inicio/. Ahora alineé el menú al centro para que viera el desplegable pero la idea es dejarlo alineado a la derecha.
Hola! muchas gracias por el tutorial, estoy viendolo en youtube, tengo un problema, no puedo copiar el codigo para hacer los cambios, coloco copiar y cuando voy a pegar no aparece la opcion. Podra decirme si existe algun atajo de teclado o se hace de forma diferente?, gracias
Ahora pude copiar el codigo pero cuando refresco la pagina me aparece la escritura del codigo en el encabezado. Super raro, que puede estar pasando, sigo los pasos como en el tutorial
Hola Sandra qué tal, ¿A qué código te refieres? Si te aparece la escritura del código en el encabezado es que algún signo te está faltando en el código. Debes revisar qué esté bien escrito.
Hay una manera para que el menú se desplace de manera deslizante hacia lado derecho y no se desplaza hacia abajo?
Hola Andes, podría ser posible con Divi Sticky y scroll effects. Mira este tutorial.
hola oscar, excelente tutorial, solo que tengo algunos errores al implementar el codigo, por ejemplo desde el movil el menu me queda centrado y no a la derecha, y otro problema es que cuando se despliega el menu no lo hace en pantalla completa..
podrias ayudarme por favor ?
Hola qué tal Federico. Compárteme la url de tu sitio para que vea el comportamiento que tiene. Seguramente encontramos la solución. Un abrazo.
Hola, tengo el mismo problema 🙁 ayuda!
Jess ¿Cuál es la url de tu página?
Hola Oscar! Excelente video y muy útil. Quería preguntarte por el texto del botón de llamada a la acción en el menú hamburguesa que aparece alineado a la izquierda. He tratado de dejarlo alineado al centro pero no encuentro como hacerlo. Me podrías ayudar por favor? Gracias y que estés muy bien.
Hola Carlos, ¿también pudiste solucionar esto? ¿o aquí si necesitas ayuda? 🤭
Hola Osacr, gracias por tu respuesta crack! No lo he solucionado… SI me pudieras ayudar para que el texto del botón en el menú hamburguesa quedara centrado, te lo agradecería enormemente. Un abrazo desde Canarias
Envíame el enlace para ver tu sitio porque así me es difícil poder darte una solución 🙂
Gracias Oscar, aquí va: https://digitalkaos.es/
Carlos en el código CSS, en la siguiente línea (selectores): body #page-container .btn-principal a
Agrega la propiedad y valor: text-align: center;
Con eso queda centrado el botón 🙂
Genial! Gracias Oscar! Saludos
Hola. Tengo un problema.
Al momento de realizar el head tuve que desactivar la opción de «Generación de Archivo CSS Estático» para solucionar un glich que me causó al intentar la alineación de los elementos, lo resolví de otro modo, pero al volver a activar la opción «Generación de Archivo CSS Estático» todos los estilos CSS de los diseños de mis páginas se desactivaron y los cambios que haga en estas con relación a apariencia de los módulos no se ven reflejados en la web solo en el editor.
Sabes a qué se puede deber esto y cómo solucionarlo. De antemano Gracias.
Hola Rafa, lo recomendable es mantener desactivada la opción de Generación de CSS Estático, después eso lo solucionas con otro plugin de cache como Autoptimize o algún otro. Muchas veces esa opción suele dar problemas con ciertos hosting, así que es mejor desactivarla.
Muchas gracias porctu ayuda.
Ya logré resolver el problema. ¡Eres mejor!
Buenas, sigo tus consejos y me ha venido super bien para mejorar mi pagina, pero me encuentro encallado y no se como resolver.
He realizado todos los pasos para cambiar logo al hacer scroll y me cambiar el tipo de letra y colores, pero me gustaría dejar el menu fijo para ipad y moviles.
Como debo hacerlo? Lo tenía así configurado en divi, pero al cambiar css y codigo no soy capaz.
Muchas gracias por adelantado.
Saludos,
Ignacio Santolaria
Hola Ignacio qué tal, este mismo efecto lo puedes replicar con las opciones sticky de divi, aquí tengo un tutorial.
Al replicarlo con las opciones sticky puedes cambiar los valores para cada resolución (escritorio, tabletas, teléfonos). Seguro con este nuevo método lo logras 💪
¡Un abrazo!
Hola Oscar!
Qué tal? Una pregunta, sería posible agregar los botones sociales al menú hamburguesa? Es decir, imagínate que en lugar del botón tenemos un módulo de social icons… se podría hacer que en la versión móvil se colocasen debajo del menú también? O el módulo buscar, no sé, cualquier otro elemento!
Gracias!
Hola Victoria, sí es posible, en lugar de usar el módulo botón usas el módulo de seguir en medios sociales de divi.
Para colocarlo en responsive podrías hacerlo con iconos de FontAwesome, en los menús colocarías los iconos el código de los iconos de FontAwesome.
Recuerda que debes sincronizar la librería con tu web para que detecte los iconos de dicha librería.
Si quieres insertar cualquier otro módulo de divi en un menú, puedes hacerlo mediante un shortocode:
1. Instalas Shortcode for Divi.
2. Instalas este otro plugin para introducir cualquier shortcode en los menús de wordpress.
2. Añades un módulo desde Divi > Biblioteca de divi
3. Copias el shortcode del módulo que te generó y lo pegas en tu menú.
Muchas gracias Oscar! Haciendo pruebas conseguí insertar los iconos sociales en el menú secundario (tripadvisor incluido!), pero ahora no sé como alinearlos en la misma fila una vez haga el menú hamburguesa!
Me compartes tu sitio y te ayudo con eso Victoria 🙂
Hola Oscar, excelente tu video tengo dos problemas espero me ayudes a solucionar.
1. como puedo poner dos o mas menus hechos en Apariencias/menus y cuando se visualice en tablet o movil se pueda vizualizar en un solo menu hamburguesa.
2 todos los cambio hechos en DIVI generador de temas no se visualizan en ningun navegador.
saludos,
Mario
Hola Mario qué tal,
1. Desde apariencia > temas creas los menús que quieras y desde el generador de temas diseñas tus menús usando el módulo menú y asignándole el menú correspondiente. Para que se muestren las opciones de más de un menú en el mismo menú hamburguesa en móvil, te recomiendo crear otro menú que debes ocultar para escritorio y solo mostrarlo en móvil.
2. Desactiva la generación de css estático desde Divi > Opciones del tema > Constructor > Avanzado…
Lo primero gracias por el tutorial. Tengo el mismo problema que el compañero Karwin y el compañero Jonathan. yo tengo un Mega Menú con 3 niveles. He seguido el tutorial para colapsar 2 niveles pero no se como hacer para un tercer nivel. Pueden ver lo que sucede en la versión móvil en http://www.masquesuelas.es ¿Me podrían ayudar? Gracias
Hola Jesús, no hay respuestas de Karwin y Jonathan en este tutorial amigo. Si quieres dejar fija en la parte superior más de una sección puedes usar los efectos sticky de divi. Aquí tengo un tutorial que te puede ayudar.
Hola Oscar, gracias por el tutorial, me ha ayudado mucho con mi incursión en este mundo web.
Te comento que lo implemente como lo indicas y funciona perfecto en todas las paginas estáticas, sin embargo cuando entro en una página dinámica el menú hamburguesa se alinea a la izquierda y no muestra la «X» al desplegarse
¿Existe algún elemento que me permita corregir ese error?
De antemano te agradezco el apoyo
Hola Daniel qué tal, ¿A qué páginas te refieres con páginas dinámicas? Compárteme la url de tu web y le doy un vistazo al detalle que mencionas.
Saludos.
Buenas Oscar
Hace poco que he encontrado tu canal y me gusta bastante como explicas.
Tengo una duda, he seguido todos tus pasos, pero resulta que nos e porqué cuando voy haciendo la pantalla más pequeña el menú se convierte en doble empujando tanto el logo y el botón hasta que entra en la versión móvil.
Que puede ser,? no veo que te a ti te pase en el ejemplo.
Saludos
Hola Adexe, no sé si continuas con este problema, disculpa por responder hasta ahora. Si el problema aún persiste compárteme la url de tu ejercicio y con gusto lo reviso.
Saludos.
Buenas Oscar
excelente tutorial !!
Tengo un problema, he seguido todos tus pasos, pero le menú al achicar la pantalla en escritorio llega un momento que el menú forma dos filas antes de pasar al menú de hamburguesa. Además el logo se agranda un poco también. He eliminado otros códigos que tengo en el personalizador de temas por si estuviese afectando, pero no es….
Me podrías ayudar con este tema porfa, me estoy volviendo loco.
gracias !
Hola Adexe, es normal que te haga un salto de línea en cierta resolución de pantalla cuando tu menú tiene muchas opciones. Dale un vistazo a este post, seguro te ayuda.
Hola Oscar, eres un grande! Muchas gracias por dar tanta información.
He seguido todos los pasos de este tutorial y me ha funcionado todo…
En mi caso, al principio el menú hamburguesa, en móvil y tablet, arranca de color blanco dado que tiene un background oscuro.
Sin embargo, lo que yo hice fue darle FIXED al cuadrado verde en DIVI, no al azul, ya que no me interesaba que el background se viniera conmigo al hacer scroll… Pero debajo, la página tiene fondo blanco…
Me encantaría que al hacer scroll, agregarle un background oscuro y semi transparente a la sección verde de DIVI, pero si es mucha molestia, aunque sea me podrías decir cómo cambiar el color del menú harmburguesa de blanco a negro al hacer scroll por favor?
Gracias! Saludos desde Argentina
Hola Daniel qué tal, gracias.
A ver compárteme la url de tu ejercicio para ver que podemos hacer 🙂
Hola Oscar!
gracias por tu ayuda siempre,
mi consulta en este caso es como darle estilos personalizados si añadimos al botón call to action (.btn) un par de enlaces secundarios (hacer que el .btn tenga dos subelementos) pero que no hereden estilos del botón primario, ya que al añadir elementos secundarios hereda el estilo y queda fatal.
Muchas gracias por tu ayuda!
Daniel.
Hola Daniel, habría que inspeccionar la clase única para el botón primario y la clase única para el botón secundario y aplicar los estilos a su respectiva clase.
Hola Oscar!
Sencillamente excelentes tus tutoriales, muchas gracias!
Viendo este tengo una web (en realidad varias) donde quisiera que en escritorio sólo se vieran las 3 rayitas del menú y al clickear éste se vea como uno normal con una x donde estaban las 3 rayitas o hamburguesa, o sea combinar el comportamiento de celulares en escritorio en forma horizontal, se entiende ?
*al clickear en una sección este se cierre nuevamente a menú hamburguesa, tienes ya algo así donde pueda inspirarme para poder realizar lo que digo?
Hola Miguel, tengo este tutorial premium dónde implementamos un menú hamburguesa con un icono que cambia de 3 rayitas a una X.
Gracias Oscar, muy amable!!!
Lo voy a ver e investigar porque lo que quiero hacer es que quede gráficamente como el menú por defecto, o sea horizontal y arriba pero: que se pueda ocultar y mostrar con las 3 rayitas.
Gracias de nuevo!!!
Hola Oscar!
Me ha encantado el menú.
Pero me ha surgido un problemilla: el menú en el móvil se superpone a la cabecera pese a haber introducido el código.
Cómo podría solucionarlo?
Puedes usar las opciones de divi sticky para crear este mismo efecto.
y si por ejemplo quiero que el menú siga en el formato de «habilitar diseño de la caja» que viene en la sección de apariencia>personalizar>ajustes generales>ajustes de formato> y que no sea menu fullwith como viene en tu video, como seria el código?, me refiero al videotutorial de «Crear un menú fijo con el divi theme builder que cambie o reduzca su tamaño al hacer scroll»
Marco qué tal, si te funcionó el código que te compartí por el chat de soporte premium?
¡Hola a todos! ¡Qué tutorial más útil! He estado buscando cómo hacer que mi menú se vea más elegante al desplazarme por la página y esto es justo lo que necesitaba. ¡Gracias por compartir estos fragmentos de código y los trucos útiles!
Una pregunta para quienes ya han implementado este efecto en sus sitios: ¿han encontrado algún problema inesperado al hacerlo? Me encantaría escuchar sus experiencias y cómo las resolvieron. ¡Saludos!
Gracias, espero te pueda servir.
Si tienes algún problema me dices y lo revisamos.
Saludos
Hola no me sale el menu hamburguesa alineado a la izquierda. mi proyecto es distercapital.com
Hola Marianne, estoy revisando tu web. ¿Deseas tener el icono del menú hamburguesa de lado izquierdo y el logo de lado derecho?
No entiendo muy bien que es lo que necesitas alinear a la izquierda 😬
Hola si hice todos los pasos y me salía el menú hamburguesa al lado del botón es decir no se dezplazaba totalmente a la derecha pero creo ya lo he arreglado.
Excelente Marianne, si tienes algún otro problema me lo haces saber.
Un abrazo.
Hola! Me ha servido mucho este tutorial, la verdad que está muy bien explicado, pero me gustaría saber si hay alguna forma de dejar de hacer fijo el menú en tablet y móvil. Muchas gracias
Hola Natalia, ¿no quieres fijo el menú en tableta y móvil? ¿Cual es el link de tu web? Para inspeccionarlo y mencionarte que tienes que hacer…