Crear un Menú con Elementor

Necesitás ver el tutorial completo para entender cómo usar estos fragmentos de código dentro de Elementor.

Esta es la primera parte del código:

 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;
 }

Copiando y pegando estas secciones podés hacer que tu header tenga una leve transición y aquiera transparencia.

Podrías dejarlo asi pero, para mejorar la animación y darle estilo, lo mejor sería que uses este otro fragmento de código:

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

 .elementor-sticky--effects .logo img {
  max-width: 120px;
  height: auto;
 }

Para usar este código (y que funcione) tenes que darle la Clase CSS «logo» al logotipo de tu web.

Vas a tener que seleccionar el elemento dentro del panel de Elementor y escribir la clase CSS.

Recordá, te explico mejor cómo usar estos datos para modificar la animación en el tutorial.