My issue with the menu on the landing page is that it only closes when clicking the cross button. I want it to close when any link from the menu is clicked. I attempted to add code using querySelector, but it only worked for the home link and not the others. Can someone help me figure out what I'm doing wrong?
let
burger = document.getElementById("burger"),
nav = document.getElementById("main-nav"),
a = document.getElementsByClassName(".nav-link");
burger.addEventListener("click", function(e) {
this.classList.toggle("is-open");
nav.classList.toggle("is-open");
});
a.addEventListener("click", function(e) {
burger.classList.toggle("is-open");
nav.classList.toggle("is-open");
});body {
background: #000;
}
.main-nav {
position: absolute;
top: 0;
right: 0;
left: -18px;
text-align: center;
background: #fff;
opacity: 0;
z-index: -1;
visibility: hidden;
-webkit-transition: .375s;
transition: .375s;
height: 100vh;
margin: 0 !important;
}
/* CSS styling continues... */</questionbody>
<exquestionbody>
<div class="question">
<p>My menu closes only when you click on the cross button. But this is not convenient in the landing page. I want it to close when I click on any link from the menu. I tried to add the code myself, but it doesn’t work out for me. I tried adding querySelector, it worked only on the home link. Other links did not close the menu. What am I doing wrong?</p>
<p><div>
<div>
<pre class="lang-js"><code>let
burger = document.getElementById("burger"),
nav = document.getElementById("main-nav"),
a = document.getElementsByClassName(".nav-link");
burger.addEventListener("click", function(e) {
this.classList.toggle("is-open");
nav.classList.toggle("is-open");
});
a.addEventListener("click", function(e) {
burger.classList.toggle("is-open");
nav.classList.toggle("is-open");
});body {
background: #000;
}
.main-nav {
position: absolute;
top: 0;
right: 0;
left: -18px;
text-align: center;
background: #fff;
opacity: 0;
z-index: -1;
visibility: hidden;
-webkit-transition: .375s;
transition: .375s;
height: 100vh;
margin: 0 !important;
}
.main-nav.is-open {
opacity: 1;
z-index: 100;
visibility: visible;
}
.main-nav::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -15px;
background: #000;
transform-origin: 0 0;
transform: skew(-14deg) translateX(-120%);
transition: all .275s .1s;
}
.main-nav.is-open::before {
transform: skew(-14deg) translateX(0);
}
.main-nav ul {
display: inline-flex;
flex-direction: column;
height: 60%;
align-items: flex-end;
justify-content: center;
transform: translateX(-18%) skew(-16deg);
}
.main-nav li {
display: block;
margin: .5rem 0;
text-align: right;
transform: skew(16deg);
}
.main-nav a {
opacity: 0;
transform: translateY(-10px);
}
.main-nav.is-open a {
opacity: 1;
transform: translateY(0);
}
.open-main-nav {
position: absolute;
top: 15px;
padding-top: 20px;
z-index: 1000;
background: none;
border: 0;
cursor: pointer;
}
.open-main-nav:focus {
outline: none;
}
.burger {
position: relative;
display: block;
width: 28px;
height: 4px;
margin: 0 auto;
background: #fff;
transform: skew(5deg);
transition: all .275s;
}
.burger:after,
.burger:before {
content: '';
display: block;
height: 100%;
background: #fff;
transition: all .275s;
}
.burger:after {
transform: translateY(-12px) translateX(-2px) skew(-20deg);
}
.burger:before {
transform: translateY(-16px) skew(-10deg);
}<button id="burger" class="navbar-toggler open-main-nav"><span class="burger"></span></button>
<nav class="main-nav" id="main-nav">
<ul>
<li><a href="#home" class="nav-link" title="">home</a></li>
<li><a href="#services" class="nav-link" title="">services</a></li>
<li><a href="#portfolio" class="nav-link" title="">portfolio</a></li>
<li><a href="#about" class="nav-link" title="">about</a></li>
<li><a href="#contacts" class="nav-link" title="">contacts</a></li>
</ul>
</nav>