site/src/styles/header.css

/* ------ navbar ------------------------------ */
.navbar { height: 80px; }
a.nav-link { margin-top: 25px; max-height: 62px; color: white; }
a.nav-link:hover { background-color: rgb(20, 142, 161); }
a.nav-link a:hover { color: white; text-decoration: none; }
a[aria-current="page"] { 
    color: white; 
    background-color: rgb(20, 142, 161); 
    padding-top: 12px; }

a.nav-link a#active { color: white; background-color: rgb(20, 142, 161); }

a.nav-link a { 
    padding: 12px;
    color: rgb(212, 212, 212); 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
    transition: 0s; }
/* ------------------------------------------- */

/* -------------- logo ----------------------- */
img#logo { opacity: 0.7; margin-top: 20px;}
img#logo:hover { opacity: 1;}
a[aria-current="page"] img#logo { opacity: 1; margin-top: 20px; background-color: rgb(52,58,64); }
/* ------------------------------------------- */

/* ----- collapse show ---------------------- */
@media(max-width: 769px) {
    img#logo { margin: 0 0px 0 20px; }
    a.nav-link a#active { 
        color: white; 
        background-color: rgb(20, 142, 161); 
        padding-top: 11px;
        padding-bottom: 12px; }
}

button.navbar-toggler.collapsed { margin-top: 0px; margin-left: 15px; }
button.navbar-toggler { margin-top: 0px; margin-left: 15px; }

div#basic-navbar-nav.navbar-collapse.collapse.show { 
    width: 100px;
    text-align: center;
    background-color: rgb(52,58,64);
    margin-top: -0px; }
button.navbar-toggler { background-color: rgb(20, 142, 161); }
div#navbarSupportedContent.navbar-collapse.collapse.show img#logo{ margin: auto; }
/* ------------------------------------------- */

#navbarSupportedContent {
    width: 100%;
    max-width: 1880px;
    padding: 0;
    line-height: 30px;
    max-height: 56px;
    text-align: left; }

.container {
    max-width: 1160px;
    width: 100%;
    margin: 0;
    padding: 0; }


@media (max-width: 769px) { 
    a[aria-current="page"] img#logo { margin-top: 0; margin-left: 0; padding-left: 15px }
    a[aria-current="page"] { padding-top: 0 }
    button.navbar-toggler { margin-top: 15px; }
 }