Nav overlay doesnt close after clicking on a nav item

Question

I'm working on my portfolio website, but have a problem with my navigation overlay. When I open it, it works just fine. When I click on an item in the overlay it does navigate to it on the page, as it navigates to a part of the home page, but doesn't close the navigation overlay. Clicking on the X does still close it so there is no problem there. It jst doesn't close after clicking on a nav item

I'm using vanilla javascript for it with toggleClass, but I cant figure out why it doesn't close.I have tried removeClass aswell, but no luck there

$(document).ready(function() {
  $('.menu-toggler').on('click', function() {
    $(this).toggleClass('open').show;
    $('.top-nav').toggleClass('open').show;
  });
});

.top-nav {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100vh;
  z-index: 50;
  background-color: #16162d;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  transition: all 650ms cubic-bezier(1, 0, 0, 1);
}

.nav-list {
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  margin: 0 2rem;
}

.nav-link {
  font-family: 'The Historia Demo', sans-serif;
  font-size: 5rem;
  padding: 1rem;
}

.nav-link:hover,
.nav-link:focus {
  background: linear-gradient(to top, #00ffde, #0003fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-nav.open {
  top: 0;
  border-radius: initial;
}

.menu-toggler {
  position: absolute;
  top: 5rem;
  right: 5rem;
  width: 5rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1500;
  transition: transform 650ms ease-out;
}

.menu-toggler.open {
  transform: rotate(-45deg);
}

.bar {
  background: linear-gradient(to right, #00e4ff, #0003fd);
  width: 100%;
  height: 4px;
  border-radius: .8rem;
}

.bar.half {
  width: 50%;
}

.bar.start {
  transform-origin: right;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.start {
  transform: rotate(-450deg) translateX(.8rem);
}

.bar.end {
  align-self: flex-end;
  transform-origin: left;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.end {
  transform: rotate(-450deg) translateX(-.8rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-toggler">
  <div class="bar half start"></div>
  <div class="bar "></div>
  <div class="bar half end"></div>
</div>
<nav class="top-nav">
  <ul class="nav-list">
    <li><a href="index.html" class="nav-link">Home</a></li>
    <li><a href="#about" class="nav-link">About</a></li>
    <li><a href="#services" class="nav-link">Services</a></li>
    <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
    <li><a href="#experience" class="nav-link">Experience</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</nav>

For all the code here is my codepen
https://codepen.io/Triable/pen/BayqOWO

Answer 1

You need to add another event handler for click the .top-nav:

var $toggler = $('.menu-toggler');
var $topNav = $('.top-nav');

function toggle() {
  $toggler.toggleClass('open');

  $topNav.toggleClass('open');
}

$toggler.on('click', toggle);

$topNav.on('click', toggle);

.top-nav {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100vh;
  z-index: 50;
  background-color: #16162d;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  transition: all 650ms cubic-bezier(1, 0, 0, 1);
}

.nav-list {
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  margin: 0 2rem;
}

.nav-link {
  font-family: 'The Historia Demo', sans-serif;
  font-size: 5rem;
  padding: 1rem;
}

.nav-link:hover,
.nav-link:focus {
  background: linear-gradient(to top, #00ffde, #0003fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-nav.open {
  top: 0;
  border-radius: initial;
}

.menu-toggler {
  position: absolute;
  top: 5rem;
  right: 5rem;
  width: 5rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1500;
  transition: transform 650ms ease-out;
}

.menu-toggler.open {
  transform: rotate(-45deg);
}

.bar {
  background: linear-gradient(to right, #00e4ff, #0003fd);
  width: 100%;
  height: 4px;
  border-radius: .8rem;
}

.bar.half {
  width: 50%;
}

.bar.start {
  transform-origin: right;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.start {
  transform: rotate(-450deg) translateX(.8rem);
}

.bar.end {
  align-self: flex-end;
  transform-origin: left;
  transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.end {
  transform: rotate(-450deg) translateX(-.8rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-toggler">
  <div class="bar half start"></div>
  <div class="bar "></div>
  <div class="bar half end"></div>
</div>
<nav class="top-nav">
  <ul class="nav-list">
    <li><a href="index.html" class="nav-link">Home</a></li>
    <li><a href="#about" class="nav-link">About</a></li>
    <li><a href="#services" class="nav-link">Services</a></li>
    <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
    <li><a href="#experience" class="nav-link">Experience</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</nav>