Tutorial de encabezado fijo transparente

Instrucciones

Mira el video tutorial y sigue todos los pasos. Echa un vistazo a mis versiones de ejemplo para un menú blanco o un menú oscuro.

  • Asegúrate de que Elementor Pro esté instalado en su sitio web.
  • Asegúrate de que tu logotipo no tenga ninguna configuración de ancho
  • Asegúrate de que tu encabezado no sea superior a 90px
  • Asegúrate de que tu encabezado tenga una altura mínima de 90px
  • Agregue una clase css a tu logo. Cambia los píxeles para que se ajusten al diseño de tu logo.

El código css personalizado

Pon esta parte en tu sección principal

selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.5)!important
}
selector{
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}

Coloca esta parte en la imagen de tu logotipo (no olvide darle al logotipo una clase de «logo»)

.logo img {
max-width: 140px;
height: auto;
transition: all 0.5s ease;
}
.elementor-sticky--effects .logo img {
max-width: 120px;
height: auto;
}

No se limite a copiar y pegar el código en su encabezado. Solo funciona si sigue los pasos del tutorial.

Entradas relacionadas

¡ Hablémos!

Deja tus datos para poder atenderte a la brevedad.