website/assets/sass/header.scss

$header-height: 6rem;

.site-header {
    background: $background;
    color: white;
    height: $header-height;

    position: sticky;
    // pay attention to not have overflow-x: hidden on one of the parent
    top: 0;
    z-index: 90;
}

.site-header__content {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inline-menu-list {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    li {
        margin-right: 1.5rem;
        display: flex;
        align-items: center;
    }
    li:last-of-type {
        margin-right: 0;
    }
}

.membership-header-button {
    font-size: 1rem;
    padding: .5rem 2rem;
    min-width: initial;
}

.site-header__nav {
    a {
        color: white;
        text-decoration: none;
    }
    a:hover {
        opacity: 0.8;
        text-decoration: underline;
    }
}

.site-header__title {
    height: 100%;
    width: auto;
}

.site-header__logo {
    width: auto;
    height: 100%;
    transition: all 0.5s ease;
}

// .site-header__logo:hover {
//     transform: scale3d(1, 1, 1);
// }

@media (max-width: $md-breakpoint) {
    .site-header__title {
        padding-right: 1rem;
    }
    .site-header__nav {
        line-height: 2rem;
    }
}

$burger-menu-size: 4rem;

.burger-menu {
    display: none;
    height: $burger-menu-size;
    width: $burger-menu-size;
    position: relative;
    bottom: -50%;
    margin-right: 2em;
    z-index: 200;

    .checkbox {
        display: none;
    }

    .burger-button {
        position: absolute;
        display: block;
        min-width: initial;
        background-color: white;
        height: $burger-menu-size;
        width: $burger-menu-size;
        padding: 1rem 1rem;
        border-radius: 50%;
        box-shadow: 0 0rem ($burger-menu-size - 2rem) rgba(0, 0, 0, 0.5);
        text-align: center; 
        cursor: pointer;
        z-index: 1200;
        user-select: none;
    }

    .background {
        position: absolute;
        height: $burger-menu-size - 1rem;
        width: $burger-menu-size - 1rem;
        margin: .5rem;
        border-radius: 50%;
        background-image: radial-gradient($background, black);
        transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
        z-index: 1000;
    }

    .nav {
        display: none;
        opacity: 0;
        position: fixed;
        top: 8rem;
        left: 4rem;
        z-index: 1000;
        // transition: all 0.8s;

        justify-content: center;
        align-items: center;

        font-size: 2rem;
    }

    .nav ul {
        list-style-type: none;
        padding: 0;

        li {
            margin-bottom: 1.5rem;
        }

        li a {
            text-transform: uppercase;
            text-decoration: none;
        }
    }

    /* functionality */
    .checkbox:checked ~ .background {
        transform: scale(41);
    }

    @keyframes navin {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .checkbox:checked ~ .nav {
        display: flex;
        opacity: 1;
        // transition: opacity 0.8s ease-in-out;
        animation: navin .5s ease-in-out;
    }

    /*  */
    /* styling hamb ICON */
    .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .icon,
    .icon::before,
    .icon::after {
        width: $burger-menu-size - 1.6rem;
        height: 2px;
        background-color: gray;
        display: inline-block;
    }

    .icon::before,
    .icon::after {
        content: "";
        position: absolute;
        left: 0;
        transition: all 0.2s;
    }

    .icon::before {
        top: -0.8rem;
    }
    .icon::after {
        top: 0.8rem;
    }

    .burger-button:hover icon:before {
        top: -1rem;
    }
    .burger-button:hover icon::after {
        top: 1rem;
    }

    .checkbox:checked + .burger-button {
        z-index: 2000;
    }

    .checkbox:checked + .burger-button .icon {
        background-color: transparent;
    }

    .checkbox:checked + .burger-button .icon::before {
        top: 0;
        transform: rotate(135deg);
    }
    .checkbox:checked + .burger-button .icon::after {
        top: 0;
        transform: rotate(-135deg);
    }
}


@media (max-width: $md-breakpoint) {
    // still not supported in firefox in 2023! I can't believe it
    body:has(.checkbox:checked) {
        overflow: hidden;
    }
    .desktop-nav {
        display: none;
    }
    .burger-menu {
        display: block;
    }
}