F_A_8_Test_app/src/styles/components/_header.scss

.header {
    position: fixed;    
    top: 0;
    background: $color-lightsteelblue-transparent;
    height: 130px;
    width: 100%;
    &__logo {
        padding-top: 10px; 
        margin: 0;
        text-align: center;
        &::first-letter {
            color: $color-red;
        }
        &--i-letter {
            color: $color-green;
        }
        &--divider {
            width: 30%;
            margin: auto;
            margin-top: 5px;
        }
    }

    &__flex-wrapper {
        margin: auto;
        margin-top: 20px;
        width: 95%;
        display: flex;
        justify-content: space-between;
    }

    nav {
        font-family: 'Poiret One', cursive;
        font-weight: bold;
        ul {
            display: flex;
            margin-bottom: 25px;

            .header-nav {
                
            }

            li {
                a {
                    color: $color-white;
                    text-shadow: 1px 1px 2px black;
                    font-size: 22px;
                    transition: all 300ms ease-in-out;
                    padding: 10px 20px;
                }
                .nav__list-item--admin-only {
                    color: orange;
                }
                a:hover {
                    border-bottom: 2px solid white;
                    background: $color-lightgrey-transparent;
                }
                .nav__list-item--admin-only:hover {
                    border-bottom: 2px solid orange;
                    background: $color-lightgrey-transparent;
                }
            }
        }
    }

    .header__links {
        &--sign-in {
            margin-right: 1.5vw;
        }
        &--sign-up {
            margin-right: 20px;
        }
    }
    
    @media screen and (max-width: 1200px) {
        &__flex-wrapper {
            width: 100%;
            display: block;
            margin-top: 15px;
        }
        &__toggle-trigger {
            position: absolute;
            top: 65%;
            cursor: pointer;
            left: 0;
            margin-left: 1em;
            & span,
            & span::after,
            & span::before {
                display: block;
                height: 2px;
                width: 2em;
                border-radius: 2px;
                background: white;
            }
            & span {
                position: relative;
            }
            & span::after,
            & span::before {
                position: absolute;
                content: "";
            }
            & span::after {
                top: 7px;
            }
            & span::before {
                bottom: 7px;
            }
        }

        .nav-toggle-status {
            &--closed {
                transform: scale(1, 0);
            }
            &--opened {
                transform: scale(1, 1);
            }
        }
        nav {
            position: absolute;
            width: 100%;
            top: 100%;
            
            background: $color-lightsteelgrey-transparent;
            transition: transform 400ms ease-in-out;
            transform-origin: top;
            & a {
                font-size: 18px;
            }
            & a:hover {
                font-size: 22px;
            }
            ul {
                display: block;
                margin: 0;
            }
            ul li {
                padding: 1em;
                border-bottom: 1px solid $color-lightgrey;
                a {
                    transition: none !important;
                    padding: 0;
                }
            }
            ul li:first-of-type {
                border-top: 1px solid $color-lightgrey;
            }
        }
        .header__links {
            display: flex;
            justify-content: center;
            &--sign-in {
                margin-right: 1.5vw;
            }
            &--sign-up {
                margin-left: 1.5vw;
                margin-right: 0;
            }
        }
    }
}