Apabila pengguna mengklik pautan untuk menyemak imbas tapak web, bar navigasi tidak ditutup?

Saya telah cuba menambah pendengar acara klik pada setiap pautan untuk menutup bar navigasi, tetapi ia tidak berfungsi! Juga, ikon menu hamberberger dalam kedudukan aktif (iaitu X) tidak sejajar. Tetapi masalah utama ialah bar navigasi runtuh apabila diklik.

$(document).ready(function() {
  $('.container').click(function() {
    $('.navbar .menu').toggleClass("active");
  });
});
function myFunction(x) {
x.classList.toggle("change");
}
        

@media (max-width: 1104px) {
.about .about-content .left img {
    height: 350px;
    width: 350px;
}
}

@media (max-width: 991px) {
.max-width {
    padding: 0 50px;
}
}

@media (max-width: 947px) {
.menu-btn {
    display: block;
    z-index: 999;
}
/* .menu-btn i.active:before {
    content: "\f00d";
} */
.navbar .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    background: #111;
    text-align: center;
    padding-top: 80px;
    transition: all 0.3s ease;
}
.navbar .menu.active {
    left: 0;
}
.navbar .menu li {
    display: block;
}
.navbar .menu li a {
    font-family: 'Josefin Sans', sans-serif;
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
}
}
.navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  padding: 30px 0;
  font-family: 'Ubuntu', sans-serif;
  transition: all 0.3s ease;
}

.navbar.sticky {
  padding: 15px 0;
  background: crimson;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a {
  position: relative;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  border: 3px solid #fff;
  padding: 0px 10px;
  text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
  letter-spacing: 2px;
}

.navbar .logo a::after {
  content: 'PANDEY';
  position: absolute;
  font-size: 15px;
  font-weight: bold;
  bottom: -12px;
  /* color: crimson; */
  right: 15px;
  background: crimson;
  border-radius: 5px;
  /* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
  padding: 0px 4px;
  letter-spacing: 2px;
}

.navbar .logo a span {
  color: crimson;
  transition: all 0.3s ease;
}

.navbar.sticky .logo a::after {
  border-radius: 4px;
  background: #fff;
  color: crimson;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}

.container {
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
}

.bar1 {
  width: 35px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.bar2 {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.bar3 {
  width: 15px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -6px) rotate(40deg);
  width: 35px;
}

.navbar.sticky .logo a span {
  color: #fff;
}

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  font-family: 'Josefin Sans', sans-serif;
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  position: relative;
  color: #fff;
}

.navbar.sticky .menu li a:hover {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1  /jquery.min.js"></script>
<nav class="navbar">
  <div class="max-width">
    <div class="logo"><a href="#">Chhailbihari</a></div>
    <ul class="menu">
      <li class="menu-btn"><a href="#home">Home</a></li>
      <li class="menu-btn"><a href="#about">About</a></li>
      <li class="menu-btn"><a href="#services">Services</a></li>
      <li class="menu-btn"><a href="#skills">Skills</a></li>
      <li class="menu-btn"><a href="#contact">Contact</a></li>
    </ul>
    <div class="menu-btn">
      <div class="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
    </div>
  </div>
</nav>