Q:

How to close the menu when clicking on the link

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? 

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>

A:

Use Element.querySelector() and Element.querySelectorAll()
Since you have a collection of links, iterate them with .forEach() in order to assign a click listener to every anchor. 

const
  burger = document.querySelector("#burger"), 
  nav = document.querySelector("#main-nav"),  // Use ID, if you already use one. 
  a = document.querySelectorAll(".nav-link"); // PS: Use the right selectors! 

burger.addEventListener("click", function(e) {
  this.classList.toggle("is-open");
  nav.classList.toggle("is-open");
});

a.forEach(el => el.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>

