EXPANDING HEADER ANIMATION

/*set width of sticky header*/

#_header-ID.oxy-header-wrapper.oxy-header.oxy-sticky-header.oxy-sticky-header-active {
   max-width: 100vw;
  }

/*add color to overlay header*/

#_header-ID.oxy-header.oxy-overlay-header:not(.oxy-sticky-header-active) .oxy-header-row,
#_header-ID.oxy-header.oxy-overlay-header:not(.oxy-sticky-header-active) {
    background-color: #e6e7e8!important;

    }

/* shrinks the header, NOTE: remember to set oxy header row height to a higher value in settings.  you can also add a different color here to give the sticky header a different color, for this to work, remove color from the selector: oxy-header-container */

 .oxy-header.oxy-sticky-header-active #_header_row-ID {
  height:60px;
    }


/* changes the logo size to fit the shrinking header*/
.oxy-header.oxy-sticky-header-active img {
     height:50px!important;
}

/* set transition duration*/

#_header_row-ID,
#_header-ID.oxy-header.oxy-overlay-header:not(.oxy-sticky-header-active) .oxy-header-row,
#_header-ID.oxy-header.oxy-overlay-header:not(.oxy-sticky-header-active),
#_header-ID.oxy-header-wrapper.oxy-header.oxy-sticky-header.oxy-sticky-header-active,
.oxy-header img {
     -webkit-transition:0.8s ease all;
     transition:0.8s ease all
   }