_header.scss 2.43 KB
.nav-container {
    position: sticky;
    top: 0;
    z-index: 999;
}

.admin-bar .nav-container {
    top: 32px;

    @media screen and (max-width: 800px) {
        top: 0px;
    }
}

#top-nav {
    background-color: #F6FBEF;
    color: #000;
    text-align: right;
    height: 40px;

    .container {

        @media screen and (max-width: 800px) {
            justify-content: flex-end;
            width: 100vw;
            max-width: unset;
        }
    } 
 
    


    a {
        color: #000;
        text-decoration: none;

    }
}

#main-nav {
    @media screen and (max-width: 800px) {
        min-height: 82px;
        max-width: unset;
    }

    .container {

        @media screen and (max-width: 800px) {
            justify-content: flex-end;
            width: 100vw;
            max-width: unset;
        }
    }
}

#wrapper-navbar {
    .navbar-brand {
        position: absolute;
        top: -40px;
        left: 40px;

        @media screen and (max-width: 800px) {
            left: 20px;
            top: -20px;
            width: 120px;
            height: 120px;
        }
    }

}

#navbarNavDropdown {
    height: 66px;

    @media screen and (max-width: 800px) {
        height: auto;
        padding-top: 60px;
    }

    .menu-item:not(.donate) {

        a {
            padding: 28px 32px;
            font-family: "PT Sans", sans-serif;
            font-size: 1.25rem;
            color: #fff;
            text-decoration: none;
            line-height: 1.63rem;

            @media screen and (max-width: 800px) {
                padding: 10px 22px;
            }
        }

        a:hover {
            color: #FF9119;
            text-decoration: underline;
        }
    }

    .donate {

        a {
            padding: 28px 32px;
            font-family: "PT Sans", sans-serif;
            font-size: 1.25rem;
            background-color: #3DB5E6;
            color: #231F20;
            line-height: 1.63rem;

            @media screen and (max-width: 800px) {
                background-color: transparent;
                color: #fff;
                padding: 10px 22px;
            }
        }

        a:hover {
            background-color: #FF9119;
            color: #231F20;
            text-decoration: none;
        }
    }
}

.navbar-toggler {
    border: 0px solid transparent !important;

}

.navbar-toggler-icon {
    background-image: url("/wp-content/themes/understrap-child/images/menu.png");
    width: 56px;
    height: 56px;

}