How to make hamburger close upon click of links

I know this has been asked before, but my setup seems different than the ones I’ve found so far.

My code is as follows (really bad at coding, by the way)

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family:Helvetica;
}

.topnav {
  overflow: hidden;
  background-color: white;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #add8e6;
  color: black;
}

.topnav a.active {
  background-color: white;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 1000px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
color: black
  }
}

@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>



<div class="topnav" id="myTopnav">
  <a href="#vatsatoimii">Toimiva vatsa</a>
  <a href="#asiakaspalautteet">Palautteet</a>
  <a href="#sisaltoperus">Lyhyt sisältö</a>
  <a href="#tarkkasisalto">Tarkka sisältö</a>
  <a href="#jasenyys">Jäsenyys ilmaiseksi</a>
  <a href="#ukk">UKK</a>
  <a href="#sisaltoperus">Hinta</a>
  <a href="#kokemukseni">Oma<br>kokemukseni</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

Not sure what to do to make the hamburger fold after clicking one of the anchor links.

Also, for some reason some iOS users state that the menu (when not in hamburger) is on the left, not centered.

Thank you!

Answer

You could add the same function to those navigation items.

let navLinks = document.querySelectorAll('.topnav a:not(.icon)');
navLinks.forEach((link)=>{
   link.addEventListener('click', function(e) {
       e.preventDefault();
       myFunction();
   })
});

Or you could add it to all those together, since you are calling the same function.

let navLinks = document.querySelectorAll('.topnav a');
navLinks.forEach((link)=>{
   link.addEventListener('click', function(e) {
       e.preventDefault();
       myFunction();
   })
});

and remove it from your html:

<a href="#close" class="icon">
    <i class="fa fa-bars"></i>
</a>

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
let navLinks = document.querySelectorAll('.topnav a:not(.icon)');
navLinks.forEach((link)=>{
   link.addEventListener('click', function(e) {
       e.preventDefault();
       myFunction();
   })
});

body {
  margin: 0;
  font-family:Helvetica;
}

.topnav {
  overflow: hidden;
  background-color: white;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #add8e6;
  color: black;
}

.topnav a.active {
  background-color: white;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 1700px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
color: black
  }
}

@media screen and (max-width: 1700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">




<div class="topnav" id="myTopnav">
  <a href="#vatsatoimii">Toimiva vatsa</a>
  <a href="#asiakaspalautteet">Palautteet</a>
  <a href="#sisaltoperus">Lyhyt sisältö</a>
  <a href="#tarkkasisalto">Tarkka sisältö</a>
  <a href="#jasenyys">Jäsenyys ilmaiseksi</a>
  <a href="#ukk">UKK</a>
  <a href="#sisaltoperus">Hinta</a>
  <a href="#kokemukseni">Oma<br>kokemukseni</a>
  <a href="#close" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>