<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>