How to close on click my responsive hamburger menu when using anchor tag

Question

My navigation html code is as follows

var navList = document.getElementById("nav-lists");

function Show() {
  navList.classList.add("_Menus-show");
}

function Click() {
  navList.classList.remove("_Menus-show");
}

function Hide() {
  navList.classList.remove("_Menus-show");
}

.bg-img {
  /* The image used */
  background-image: url("images/logo-background-100.png");
  background-color: #4169E1;
  min-height: 100px;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Needed to position the navbar */
  position: relative;
}

.container {
  height: 100px;
  max-width: 1280px;
  background-color: #4169E1;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.container .logo {
  max-width: 300px;
  padding: 0 10px;
  overflow: hidden;
}

.container .logo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100px;
}

.container .logo a img {
  max-width: 100%;
  max-height: 100px;
}

.container .fb-buttons {
  max-width: 200px;
  padding: 50 50px;
  overflow: hidden;
}

.container .fb-buttons a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100px;
}

.container .navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 10px;
}

.container .navbar ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.container .navbar ul li a {
  text-decoration: none;
  color: #f9d5a0;
  font-size: 16px;
  text-transform: uppercase;
  display: block;
  height: 100px;
  line-height: 100px;
  cursor: pointer;
  padding: 0 28px;
}

.container .navbar ul li a:hover {
  background-color: #1b1b1b;
  color: #cda12c;
  transparency: 75%
}

.container .navbar ul li a.active {
  background-color: #4169E1;
  color: #cda12c;
}

.container .navbar ul .close {
  display: none;
  text-align: right;
  padding: 10px;
}

.container .navbar ul .close span {
  font-size: 40px;
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 0 10px;
  cursor: pointer;
}

.container .navbar .icon-bar {
  padding: 18px 8px;
  width: 50px;
  height: 60px;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  cursor: pointer;
}

.container .navbar .icon-bar i {
  background-color: #ffffff;
  height: 2px;
}

@media only screen and (max-width: 650px) {
  .container {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .container .logo {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .container .navbar {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
  }
  .container .navbar ul {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    position: fixed;
    left: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #ffffff;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-transition: left .3s;
    -o-transition: left .3s;
    transition: left .3s;
  }
  .container .navbar ul li a {
    padding: 10px;
    font-size: 20px;
    height: auto;
    line-height: normal;
    color: #555555;
  }
  .container .navbar ul .close {
    display: block;
  }
  .container .navbar .icon-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .container .navbar ._Menus-show {
    left: 0;
  }
}

<div class="bg-img">
  <div class="container">
    <div class="logo">
      <a href="#"><img src="images/swallows-on-white.png" alt="logo"></a>
    </div>
    <div class="navbar">
      <div class="icon-bar" onclick="Show()"> <i></i> <i></i> <i></i> </div>
      <ul id="nav-lists">
        <li class="close"><span onclick="Hide()">☰</span></li>
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html#service1">I DO's</a></li>
        <li><a href="services.html#service2">What's in a name?</a></li>
        <li><a href="services.html#service3">farewells</a></li>
        <li><a href="contact.html">Contact us </a></li>
      </ul>
    </div>
  </div>
</div>

Currently, the hamburger menu will work on either index or contact pages and on the first click within services but any further clicks, the menu stays in place and the content can be seen moving behind I can provide my css as well if needed, thank you in advance.

Answer 1

If you add this lines to your js code it would work:

var links = document.querySelectorAll("#nav-lists a");

links.forEach(n => {
  n.addEventListener('click', () => {
    console.log('clicked');
    Hide();    
    return false; // remove this line that the links would follow
  })
})

The problem occurs that the links which dont work are anchor links. The other two links which work for you, work only because the page is reloaded.

var navList = document.getElementById("nav-lists");
var links = document.querySelectorAll("#nav-lists a");

links.forEach(n => {
  n.addEventListener('click', () => {
    console.log('clicked');
    Hide();    
  })
})
function Show() {
  navList.classList.add("_Menus-show");
}

function Click(){
  navList.classList.remove("_Menus-show");
}
      
function Hide(){
  navList.classList.remove("_Menus-show");
}

.bg-img {
  /* The image used */
  background-image: url("images/logo-background-100.png");
  
background-color: #4169E1;
  min-height: 100px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /* Needed to position the navbar */
  position: relative;
}

.container {
  height: 100px;
  max-width: 1280px;
background-color: #4169E1;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;

}

.container .logo {
  max-width: 300px;
  padding: 0 10px;
  overflow: hidden;
}

.container .logo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100px;
}

.container .logo a img {
  max-width: 100%;
  max-height: 100px;
}

.container .fb-buttons {
  max-width: 200px;
  padding: 50 50px;
  overflow: hidden;
}

.container .fb-buttons a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100px;
}

.container .navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 10px;
}

.container .navbar ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;

}

.container .navbar ul li a {
  text-decoration: none;
  color: #f9d5a0;
  font-size: 16px;
  text-transform: uppercase;
  display: block;
  height: 100px;
  line-height: 100px;
  cursor: pointer;
  padding: 0 28px;
}

.container .navbar ul li a:hover {
  background-color: #1b1b1b;
  color: #cda12c;
  transparency: 75%
}



.container .navbar ul li a.active {
  background-color: #4169E1;
  color: #cda12c;
}

.container .navbar ul .close {
  display: none;
  text-align: right;
  padding: 10px;
}

.container .navbar ul .close span {
  font-size: 40px;
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 0 10px;
  cursor: pointer;
}

.container .navbar .icon-bar {
  padding: 18px 8px;
  width: 50px;
  height: 60px;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  cursor: pointer;
}

.container .navbar .icon-bar i {
  background-color: #ffffff;
  height: 2px;
}

@media only screen and (max-width: 650px) {
  .container {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .container .logo {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .container .navbar {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
  }

  .container .navbar ul {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    position: fixed;
    left: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #ffffff;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-transition: left .3s;
    -o-transition: left .3s;
    transition: left .3s;
  }

  .container .navbar ul li a {
    padding: 10px;
    font-size: 20px;
    height: auto;
    line-height: normal;
    color: #555555;
  }

  .container .navbar ul .close {
    display: block;
  }

  .container .navbar .icon-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .container .navbar ._Menus-show {
    left: 0;
  }
}

<div class="bg-img">
  <div class="container">
    <div class="logo"> <a href="#"><img src="images/swallows-on-white.png"

          alt="logo"></a> </div>
    <div class="navbar">
      <div class="icon-bar" onclick="Show()"> <i></i> <i></i> <i></i> </div>
      <ul id="nav-lists">
        <li class="close"><span onclick="Hide()">?</span></li>
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html#service1">I DO's</a></li>
        <li><a href="services.html#service2">What's in a name?</a></li>
        <li><a href="services.html#service3">farewells</a></li>
        <li><a href="contact.html">Contact us </a></li>
      </ul>
    </div>
  </div>
</div>