Sticky/Overlay header CSS - single row

/*FOR SINGLE ROW HEADER*/
: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;
    padding: 0;
}


/*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);

}

/*OFFSET THE JERKY BEHAVIOUR OF BODY ON STICKY*/
body.has-sticky{
    margin-top: var(--header-height)  /*use only if scroll distance is greater than or equal to header height, don't use in overlay header, EXPERIEMENT WITH THE VALUE*/
}

/*initial logo size for sticky header*/

.header-row .logo {
    width: 80px;
    transition: width 1s;
}


/*logo size for sticky */

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

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

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

/*animations*/

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

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

}