Sticky header in WordPress using Elementor

gistfile1.txt

/* 
* Transparent to sticky header
* 
*/

.sticky-header{
    background-color: transparent!Important;
    padding: 2% 0;
    transition: 
      background-color 300ms linear,
      box-shadow  300ms linear, padding 300ms linear;
}

.sticky-header.elementor-sticky--effects{
    padding: 1% 0;
    background-color: #F9F9F9!important;
    box-shadow: #00000029 0 0px 20px 0;
  
}

/*
* Shrink Logo and Navigation on Scroll
*/

.site--logo.elementor-widget-image img{
    width: 120px;
    transition: width .3s ease-in;
}

.elementor-sticky--effects .site--logo.elementor-widget-image img{

    width: 100px;
}

/* 
* Shrink Navigation font-size and change color on scroll
*/

.nav-menu  .elementor-nav-menu--main .elementor-item{
        color: #fff;
        font-size: 1rem;
        transition: color 300ms ease-in, font-size 300ms ease-in;
}
   
   .elementor-sticky--effects   .nav-menu .elementor-nav-menu--main .elementor-item{
        color: #000;
        
}



/* 
* Change Logo on Scroll
*/

.site--logo-red.elementor-widget-image img,
.site--logo.elementor-widget-image img{
    width: 64px;
    transition: 
      opacity 20ms linear, 
      width 300ms linear;
}


.elementor-sticky--effects .site--logo-red.elementor-widget-image img,
.elementor-sticky--effects .site--logo.elementor-widget-image img{
      width: 64px;
}


.site--logo-red.elementor-widget-image img{
    opacity: 0;    
}


.elementor-sticky--effects .site--logo-red.elementor-widget-image img{
    opacity: 1
}


.elementor-sticky--effects .site--logo.elementor-widget-image img{  
    opacity: 0
}