导航栏指向部分，冻结，然后出现在主页上

Question

该项目正在使用Bootstrap，jQuery和CSS。这是一个全页滚动网站，除导航栏外没有使用其他jQuery。下拉动画汉堡包菜单可以很好地打开和关闭，而无需单击任何导航菜单项，并且可以将您定向到页面的被单击部分。但是，当您单击导航项时，它将无需关闭导航栏即可将您定向到所需部分。当您单击X关闭导航栏时，在1-2秒的延迟后，页面跳至主页。但是，正确的部分仍在目录中。

这是我的代码：

HTML + CSS + jQuery

$(document).ready(menu);

function menu() {
    $('#menu-icon-shape').on('click', function() {
    $('#menu-icon-shape').toggleClass('active');
    $('#top, #middle, #bottom').toggleClass('active');
    $('#overlay-nav').toggleClass('active');
  });
}

/* Menu icon */

#menu-icon-shape {
  width: 60px;
  height: 60px;
  position: fixed;
  top: 40px;
  right: 45px;
  border-radius: 50%;
  z-index: 2;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#menu-icon-shape:hover {
  background: #1f2833;
}

#menu-icon-shape.active:hover {
  background: #1f2833;
}

#menu-icon {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#top, #middle, #bottom {
  width: 100%;
  height: 4px;
  background: #fff;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

#middle {
  margin: 4px 0;
}

/* Transform menu icon into close icon */

#top.active {
  -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
  transform: translateY(8px) translateX(0) rotate(45deg);
}

#middle.active {
  opacity: 0;
}

#bottom.active {
  -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
  transform: translateY(-8px) translateX(0) rotate(-45deg);
}

/* Navigation */

#overlay-nav {
  width: 100%;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.35s, visibility 0.35s, height 0.6s ease;
  transition: opacity 0.35s, visibility 0.35s, height 0.6s ease;
}

/* Open navigiation */

#overlay-nav.active {
  width: 100%;
  height: 100%;
  opacity: 100;
  visibility: visible;
}

#nav-content {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#nav-content ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

#nav-content ul li a {
  width: 100%;
  padding: 2% 0;
  display: block;
  font-family: 'raleway', sans-serif;
  font-weight: 100;
  font-size: 1.5em;
  letter-spacing: 0.6px;
  text-decoration: none;
  color: #fff;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  text-transform: uppercase;
}

#nav-content ul li a:hover {
  background: #000;
  color: #66fcf1;
  font-weight: 700;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>


<div class="content-container">
      
  <div class="logo">JB</div>

  <!-- Menu icon -->
  <div id="menu-icon-shape">
    <div id="menu-icon">
      <div id="top"></div>
      <div id="middle"></div>
      <div id="bottom"></div>
    </div>
  </div>

  <!-- Overlay menu -->
  <div id="overlay-nav">
    <div id="nav-content">
      <ul>
        <li><a href="#title-section">Home</a></li>
        <li><a href="#designed">Designed</a></li>
        <li><a href="#produced">Produced</a></li>
        <li><a href="#timeline-section">Timeline</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>

</div>