public/assets/navbar.css

nav.navbar {
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 1px 1px 8px black;
}

nav.navbar input.hamburger[type=checkbox],
nav.navbar input.hamburger[type=checkbox]+label,
input.hamburger-sidenav[type=checkbox],
input.hamburger-sidenav[type=checkbox]~nav.navbar label.label-sidenav {
    display: none;
}

nav.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav.navbar ul li {
    float: left;
}

nav.navbar ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav.navbar ul li a.active {
    background-color: #90ee90;
    color: #202124;
}

nav.navbar ul li a:not(.logo) {
    padding: 21px 16px;
}

nav.navbar ul li a:hover:not(.active) {
    background-color: #111;
}


nav.navbar ul li.right {
    float: right;
}

@media screen and (max-width: 600px) {
    input.hamburger-sidenav[type=checkbox]~nav.navbar label.label-sidenav {
        display: block;
        cursor: pointer;
        float: left;
    }

    input.hamburger-sidenav[type=checkbox]~nav.navbar label.label-sidenav .icon-bar {
        display: block;
        width: 48px;
        height: 6px;
        background-color: #cccccc;
        margin: 10px;
        transition: all 0.2s;
    }

    input.hamburger-sidenav[type=checkbox]~nav.navbar label.label-sidenav .top-bar {
        width: 24px;
        transform: translateY(9px) rotate(45deg);
    }

    input.hamburger-sidenav[type=checkbox]~nav.navbar label.label-sidenav .middle-bar {
        opacity: 0;
    }

    input.hamburger-sidenav[type=checkbox]~nav.navbar label.label-sidenav .bottom-bar {
        width: 24px;
        transform: translateY(-9px) rotate(-45deg);
    }

    input.hamburger-sidenav[type=checkbox]:checked~nav.navbar label.label-sidenav .top-bar {
        transform: translateY(9px) rotate(-45deg);
    }

    input.hamburger-sidenav[type=checkbox]:checked~nav.navbar label.label-sidenav .middle-bar {
        opacity: 0;
    }

    input.hamburger-sidenav[type=checkbox]:checked~nav.navbar label.label-sidenav .bottom-bar {
        transform: translateY(-9px) rotate(45deg);
    }

    div.sidenav {
        display: none;
    }

    input.hamburger-sidenav[type=checkbox]:checked~div.sidenav {
        display: block;
    }

    nav.navbar ul li.right, nav.navbar ul li:not(.nav-logo) {
        float: none;
    }

    nav.navbar input.hamburger[type=checkbox]+label {
        display: block;
        cursor: pointer;
        float: right;
    }

    nav.navbar input.hamburger[type=checkbox]+label .icon-bar {
        display: block;
        width: 48px;
        height: 6px;
        background-color: #cccccc;
        margin: 10px;
        transition: all 0.2s;
    }

    nav.navbar input.hamburger[type=checkbox]+label .top-bar {
        transform: rotate(0);
    }

    nav.navbar input.hamburger[type=checkbox]+label .middle-bar {
        opacity: 1;
    }

    nav.navbar input.hamburger[type=checkbox]:checked+label .top-bar {
        transform: translateY(16px) rotate(45deg);
    }

    nav.navbar input.hamburger[type=checkbox]:checked+label .middle-bar {
        opacity: 0;
    }

    nav.navbar input.hamburger[type=checkbox]:checked+label .bottom-bar {
        transform: translateY(-16px) rotate(-45deg);
    }

    nav.navbar li:nth-of-type(2) {
        margin-top: 64px;
    }

    nav.navbar li:not(.nav-logo) {
        display: none;
    }

    nav.navbar input.hamburger[type=checkbox]:checked~ul li:not(.nav-logo) {
        display: block;
    }
}