Sticky/Overlay header CSS

:root{
    --header-height: 120px;
    --header-bg-color: brown;
    --hero-top-padding: 75px;
    --sticky-height: 80px;
    --sticky-bg-color: green;
    --sticky-shadow: 0px 5px 20px -10px rgb(0,0,0,0.39);
    /* --scroll-distance: 400; this is no longer necessary, set value in JavaScript (scrollDistance)*/
    --animation-name: slide; /* fade or slide */
    --animation-duration: 0.6s;
    --animation-easing: ease;
    /*--overlay-header: false; this is no longer necessary, set value in JavaScript (checkOverlay) */
    /*--sticky-header: true; this is no longer necessary, set value in JavaScript (checkSticky) */


}



.header {
    height: var(--header-height);
    transition: height 1s ease;
}


/*hide sticky row by default*/
.header .header-row[data-sticky-header]{
    transform:translateY(-500%)
}

/*unhide when sticky */
.header.sticky .header-row[data-sticky-header]{
    transform:translateY(0)
}



.header.sticky .header-row:not([data-sticky-header]){
    display: none;
}

/*overlay properties*/
.header.overlay {
    position: absolute;
    top: 0;
    background-color: transparent;
}

/*offset top padding for overlay hero section*/

.has-overlay #hero {
    padding-top: var(--hero-top-padding)
}


/*sticky header properties*/
.header.sticky {
    padding-top: 0;
    position: fixed;
    top: 0;
    background-color: var(--sticky-bg-color);
    height: var(--sticky-height);
    box-shadow: var(--sticky-shadow);
    animation: var(--animation-name) var(--animation-duration) var(--animation-easing);
}

body.has-sticky{
    margin-top: var(--sticky-height)  /*use only if scroll distance is greater than or equal to header height, don't use in overlay header*/
}

/*initial logo size for sticky header*/

.header-row[data-sticky-header] .logo {
    width: 80px;
    transition: width 1s;
}


/*logo size for sticky */

.header.sticky .logo{
    width: 50px
}

/*reduce padding of menu item  (optional) */

.sticky #split_menu_2 a{
    padding-top: 0.5rem;
}

/*animations*/

@keyframes fade{
    from {opacity:0}
    to {opacity:1}
}

@keyframes slide{
    from{transform: translateY(-100px)}
    to {transform: translateY(0)}
}

}