Hello, I’ve a navigation menu which is hidden when the breakpoint is 640px . When I added an active element to it, my menu navigation works but my mobile menu stops working and I’ve got a message ‘Cannot read property ‘classList’ of null at HTMLBodyElement’.
Could you help me resolve this problem without deleting my active element?
Thanks for your help!
.menuMobile {
position: absolute;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 35%;
height: 62%;
@media only screen and (min-width: $sm) {
visibility: visible !important;
background-color: white;
}
}
@media only screen and (min-width: $sm) {
.active{
text-decoration: underline;
}}
.mobile {
position: absolute;
width: 100%;
height: 140%;
z-index: 900;
padding: 40% 10% 10% 20%;
margin-left: 0%;
margin-right: 0%;
background-color: black;
// left : -100%;
animation: run 1s cubic-bezier(0.3, 0.460, 0.450, 0.940);
animation-duration: 1s;
}
@keyframes run {
0% {
right: 100%;
}
100% {
right: 0;
}
}
<div class="sous-menu-burger">
<i class="fas fa-grip-lines"></i>
</div>
<div class="cont-main">
<div id="menuMobile" class="menuMobile">
<a href="#"><div class="home-a">Home</div></a>
<a class="active" href="#"><div class="about-a">About</div></a>
<a href="#"><div class="skills-a">Skills</div></a>
<a href="#"><div class="projects-a">Projects</div></a>
<a href="#"><div class="contacts-a">Contacts</div></a>
</div>
let elem = document.querySelector("#menuMobile");
document.body.addEventListener("click", function (e) {
if (e.target.matches(".fa-grip-lines")) {
if (menuMobile.style.visibility === "hidden" && window.innerWidth < "640") {
elem.classList.remove("menuMobile");
elem.classList.add("mobile");
elem.style.visibility = "visible";
e.target.style.color = "white";
} else if (
menuMobile.style.visibility != "visible" &&
window.innerWidth > "640"
) {
elem.classList.remove("mobile");
}
else {
menuMobile.style.visibility = "hidden";
elem.classList.remove("mobile");
elem.classList.add("menuMobile");
e.target.style.color = "black";
}
}
});