How can I close my hamburger menu by clicking on links?

I've made this hamburger menu and it's working good except when I click on my links. It doesn't close the menu automatically, I always have to click the link then close the menu by the Hamburger button.

How can I make the entire menu close when I click on one of my navbar links?

Here's my codepen: https://codepen.io/Softee/pen/dygGbWy
Be sure to be in responsive mobile viewport.

Thanks for your help.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const menu_btn = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');

menu_btn.addEventListener('click', function () {
    menu_btn.classList.toggle('is-active');
    mobile_menu.classList.toggle('is-active');
});

<!-- language: lang-css -->

.hamburger{
    position:relative;
    margin-top: 30px;
    margin-left: 50px;
    display:block;
    width:35px;
    cursor:pointer;
    appearance:none;
    background:none;
    outline:none;
    border:none
}

.hamburger .bar,.hamburger:after,.hamburger:before{
    content:'';
    display:block;
    width:100%;
    height:5px;
    background-color:#1B1B1B;
    margin:6px 0px;
    transition:0.4s
}

.hamburger.is-active:before{
    transform:rotate(-45deg) translate(-8px, 6px);
    background-color: #1B1B1B;
}

.hamburger.is-active:after{
    transform:rotate(45deg) translate(-9px, -8px);
    background-color: #1B1B1B;
}

.hamburger.is-active .bar{
    opacity:0;
}

.mobile-nav{
    position:fixed;
    top:0;
    left:100%;
    width:100%;
    min-height:100vh;
    display:block;
    background: pink;
    padding-top:120px;
    transition:0.4s
}

.mobile-nav.is-active{
    left:0
}

.mobile-nav a{
	font-family: hagincaps;
	font-size: 32px;
    display:block;
    margin:0 auto 16px;
    text-align:center;
    padding:16px 16px;
    color:#1B1B1B;
    text-decoration:none
}

header .nav_container{
	z-index: 8;
	position: fixed;
	height: 100px;
	width: 100%;
	align-items: center;
}

header .nav_container nav{
	padding-top:32px;
	width: 900px;
	margin: 0 auto;
	display: flex;
	justify-content: space-evenly;
}

header .nav_container nav a{
	font-family: hagincaps;
	text-transform: uppercase;
    font-size:28px;
    color:757575;
    text-decoration:none
}

header .nav_container nav a:hover{
	border-bottom: 5px solid white;
	border-radius: 10px;
	color: white;
}

@media (min-width: 768px){
    .mobile-nav{
        display:none
    }
    .hamburger{
        display:none
    }
}

@media (max-width: 767px){
    header .nav_container nav{
        display:none
    }
}

@media (max-width: 855px){
  header .nav_container nav{
    width: 800px;
    margin: 0 auto;
  }
}

<!-- language: lang-html -->

 <header>
    <div class="nav_container">
      <nav>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
      </nav>

      <button class="hamburger">
    <div class="bar"></div>
      </button>
    </div>
  </header>

  <nav class="mobile-nav">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
  </nav>

<!-- end snippet -->

The answer to your question:

const menu_links = Array.from(document.querySelectorAll('.mobile-nav a'));

menu_links.forEach(link => {
  link.addEventListener('click', function () {
      menu_btn.classList.remove('is-active');
      mobile_menu.classList.remove('is-active');
  });
})

Typically, you will not need to add this to your code because navigation links take a user to a new page where the menu state is reset.

This code is really only useful if you are working on some kind of application or have a sticky in-page navigation like on this page: https://welcometounmh.runmytests.com/onboarding