jquery - Why my mobile burger won't work? How to tackle the issue?

Question

When I click on the burger it won't transform into cross. Although I can see in DOM the class .active is being added. Also menu doesn't respond on click at all. .img and .nav are grid items. Maybe I confused something in grid container. Don't hesitate to ask me about more details of the project. I hope I added enough details to figure out the situation. =) Thank you!

$(document).ready(function() {
  $('.header-burger').click(function(event) {
    $('.header-burger, .nav').toggleClass('.active');
  });
});

@media only screen and (max-width: 370px) {
  .nav {
    grid-row: 2;
    grid-column: 1/ span 2;
    position: relative;
    top: -112%;
    width: 100%;
    height: 100%;
    background-color: black;
    padding: 0 0 0 10px;
    z-index: 3;
  }
  .nav .active {
    top: 100%;
  }
  .header-burger {
    display: block;
    position: relative;
    width: 30px;
    height: 20px;
  }
  .header-burger:before,
  .header-burger:after {
    content: '';
    background-color: white;
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
  }
  .header-burger:before {
    top: 0;
  }
  .header-burger .active:before {
    transform: rotate(45deg);
    top: 9px;
  }
  .header-burger .active:after {
    transform: rotate(-45deg);
    bottom: 9px;
  }
  .header-burger:after {
    bottom: 0;
  }
  .header-burger span {
    position: absolute;
    background-color: white;
    left: 0;
    width: 100%;
    height: 2px;
    top: 9px;
    transition: all 0.3 ease 0.3;
  }
  .header-burger.active span {
    transform: scale(0);
  }
}

<div class="img">
  <img src="./logo.svg">
  <div class="header-burger"><span></span></div>
</div>

<div class="nav">

  <ul class="burger-ul">
    <li class="burger-li"><a>About</a></li>
    <li class="burger-li"><a>Careers</a></li>
    <li class="burger-li"><a>Events</a></li>
    <li class="burger-li"><a>Products</a></li>
    <li class="burger-li"><a>Support</a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

question from:https://stackoverflow.com/questions/65923290/why-my-mobile-burger-wont-work-how-to-tackle-the-issue

Answer 1

You are adding the class .active including the dot. Remove the dot from your script

$(document).ready(function() {
  $('.header-burger').click(function(event) {
    $('.header-burger, .nav').toggleClass('active');
  });
});