How to close CSS checkbox menu when clicking on links with JS?

So I made a pure CSS checkbox menu and everything looks how I want it, except for when clicking the links. In my single page layout clicking the links navigates to a section of the page, but upon clicking the link, it just smooth scrolls to the section and the menu remains visible. I have read multiple similar questions and none of the solutions have worked for me. I would prefer to use JavaScript and no jQuery.

My website is still in working progress; check it out to really see what happens on mobile size https://www.itsalaam.com/

Here is my code:

/* NAVIGATION */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    z-index: 999;
    overflow: hidden;
    /* transition: background .2s ease-out; */
}
.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.header ul a {
    display: block;
    padding: 15px;
    text-align: center;
    color: rgb(224, 224, 224);
    font-size: 1.7rem;
}
.header ul a:hover {
    color: #fff;
}
.header .logo {
    float: left;
    display: block;
    padding-top: 15px;
    padding-left: 30px;
}
.header .logo img {
    width: 50px;
    transition: width .5s ease;
}
.header .menu {
    clear: both;
    float: right;
    max-height: 0;
    text-align: center;
    width: 100%;
    transition: max-height .2s ease-out;
    transition: background 0.2s ease-out;
}
.header .menu-icon {
    padding: 28px 20px;
    position: relative;
    float: right;
    cursor: pointer;
    /*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
    /*creates the middle bar of the nav-icon*/
    background: #fff;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
    transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
    top: 5px;
}
.header .menu-icon .nav-icon:after {
    top: -5px;
}
.header .menu-btn {
    display: none;
}
.header .menu-btn:checked~.menu {
    /* the ~ selects the next sibling  */
    max-height: 100vh;
    background: #000;
    z-index: 99;
    transition: background 0.2s ease-out;
    /*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
    background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
    transform: rotate(45deg);
    top: 0;
}

<header class="header">
      <a href="index.html" class="logo"><img src="/img/globeWireframe.png" alt="salaam" /></a>
      <input type="checkbox" class="menu-btn" id="menu-btn" />
      <label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
      <ul class="menu">
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#about">About</a></li>
        <li>
          <a href="#" type="button" data-toggle="modal" data-target="#exampleModal">Resume</a>
        </li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </header>