7.0. Responsive NavBar

<style>
    #navbar {
        position: fixed !important;
        z-index: 100;
        top: 0;
        left: 0;
    }

    .showshadownavbar {
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    }

    .hideshadownavbar {
        box-shadow: none;

    }

    #navbarmenu {
        display: none;
    }

    @media screen and (max-width: 600px) {

        #navbarlinks li {
            display: block;
            text-align: center;
        }

        #navbarmenu {
            display: block;
            text-align: right;
        }
    }
</style>

<script>
    navbar = document.getElementById("navbar");

    var xnav = window.matchMedia("(max-width: 600px)");
    var ynav = window.matchMedia("(max-width: 600px)");

    function responsivenavbar(ynav) {
        if (ynav.matches) {
            navbarlinks.style.display = "none";
        } else {
            navbarlinks.style.display = "block";
        }
    }

    responsivenavbar(ynav)
    ynav.addListener(responsivenavbar)

    function displaynavbarlinks(xnav) {
        if (xnav.matches) {
            if (navbarlinks.style.display === "block") {
                navbarlinks.style.display = "none";
            } else {
                navbarlinks.style.display = "block";
            }
        }
    }

    var shadownavbar = function () {
        var ynav = window.scrollY;
        if (ynav >= 10) {
            navbar.classList.add("showshadownavbar");
            navbar.classList.remove("hideshadownavbar");


        } else {
            navbar.classList.add("hideshadownavbar");
            navbar.classList.remove("showshadownavbar");

        }
    };

    window.addEventListener("scroll", shadownavbar);

</script>