Menú Transparente Sticky en WordPress con Elementor

En este video Aprenderás cómo Crear un menú transparente en WordPress con Elementor Pro desde cero. #elementor #WordPress #headertransparente
✅ Compra Elementor Pro
be.elementor.com/visit/?bta=2...
✅ 50% Descuento - Adquiere tu hosting con Hostgator 🐊
👉 www.hostgator.la/5452.html
Click en el enlace para obtener el 50% Descuento
---- Código CSS - Entra al enlace y cópialo --
‣ berthortiz.online/cabecera-tr...
🔴 ¿Quieres que te ayude a crear tu sitio web profesional para tu negocio?
✉ CONTACTO: [e-mail]
🌎 Mi Página Web: berthortiz.com/portafolio/
🎵 Música usada en el video
Amarià - Funky Souls
‣ • Amarià - Funky Souls (...
NO COPYRIGHT
Gracias por ver el video.😄
Créditos
✅ La información fue sacada del siguiente video, vayan a ver el video y suscríbanse al canal de LivingWithPixels
👍 • How to create a Blurry...

[@berthortiz]

Código -- css ---
selector.elementor-sticky--effects{
backdrop-filter: blur(4px);
background-color: rgba(0,0,0,0.8)!important;
}
selector{
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}
selector > .elementor-container{
transition: min-height 3s ease !important;
}
.logo img {
max-width: 90px;
height: auto;
transition: all 0.5s ease;
}
.elementor-sticky--effects .logo img {
max-width: 80px;
height: auto;
}

[@kattycreativa_rdk]

Mis sinceras gracias. Por fin alguien que explica las modificaciones ese el ccs. Excelente información!!!!

[@oscarb612]

buenzoooo

[@diegoperedo1208]

Muy buen tutorial muchas gracias!

[@berthortiz]

tuviste algún problema al seguir el tutorial?

[@diegoperedo1208]

@@berthortizNo, esta muy buena tu forma de explicar! solamente que utilice el codigo que me redirigió a tu pagina web y no me resultaba, luego utilice el codigo que subiste a los comentarios y funcionó de maravilla, capaz fue mi error jajaa pero por el resto una belleza

[@0owilliano0]

hola, disculpa el enlace para el código CCS esta suspendido, podrías facilitarnos otro, por favor.

[@berthortiz]

Disculpa, aqui re lo dejo. si necesitas ayuda coméntame y dime si te sirvió.
----- CSS --------
selector.elementor-sticky--effects{
backdrop-filter: blur(4px);
background-color: rgba(0,0,0,0.8)!important;
}
selector{
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}
selector > .elementor-container{
transition: min-height 3s ease !important;
}
.logo img {
max-width: 90px;
height: auto;
transition: all 0.5s ease;
}
.elementor-sticky--effects .logo img {
max-width: 80px;
height: auto;
}

[@wadodesigns]

Saludos, funciono perfectamente, ahora quisiera cambiar el color del logo, tengo la imagen del logo en formato .svg se puede hacer?

[@berthortiz]

Si, pero ahorita no sabría como hacerlo. Mi PC no sirve, intenta poner
.logo svg {
fill: #333;
}
Ahí nomás cambia el color. En teoría debería funcionar

[@berthortiz]

Comenta si te funciona. Saludos

[@joseplluis1663]

Hola y Gracias!!! está estupendo. Solo me queda un pequeño espacio en blanco en la parte superior de la cabecera que desaparece al bajar (scroll) puedes ayudarme a poder eliminar este pequeño espacio?

[@berthortiz]

Hola josep, 1- intenta quitar el padding (relleno) de la sección del header. 2- revisa el margen y que no tenga ni mas ni menos. 3 revisa la imagen, después de ciertos pixeles tiende a aparecer ese borde blanco. sino lo arreglas manda me video por Instagram y vemos cual es el problema- instagram.com/berthortizweb/ saludos.

[@explicatodoo]

Solo debes desenlazar los rellenos, eso me pasó y revisé y es lo que te dije. Saludos

[@solutechcore]

No me funciona

[@miguelzenteno3800]

en el min 4:00 me quedé no se muestra en la previsualización :'v no se qué hice mal

[@berthortiz]

a veces elementor tarda en cargar la previsualización o simplemente no la muestra. También puedes abrirla desde paginas en el panel de WordPress. si tienes dudas, solo dime y te ayudo