My nav bar is not working when I click to the burger menu-CodePudding

When I try to click to the burger menu, the navigation bar is not working. What should I do?

I wrote some html code and gave a navigation bar a special Id also I gave ID to the burger menu to use it later in jQuery.

In CSS I gave a parameter when the screen size will be less than 991px it would execute the following. I also wrote that normally display should be hidden, but when I click to the burger menu the nav class should change from to "nav show" but in my case it doesn't change.

let nav = $("#nav");

let navToggle = $("#navToggle");

navToggle.on("click", function(event) {
  event.preventDefault();

  nav.toggleClass("show");
});

@media (max-width: 991px) {
  .works__item {
    width: 50%;
  }
  .burger {
    display: flex;
  }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    background-color: #31344e;
    text-align: right;
    position: absolute;
    top: 100%;
    right: 0;
  }
  .nav.show {
    display: block;
  }
  .nav__link {
    padding: 9px 15px;
  }
}

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

<nav  id="nav">
  <a href="#"  data-scroll="#features">Features</a>
  <a href="#"  data-scroll="#works">Works</a>
  <a href="#"  data-scroll="#team">Our Team</a>
  <a href="#"  data-scroll="#reviews">Reviews</a>
  <a href="#"  data-scroll="#download">Download</a>
</nav>

<button  type="button" id="navToggle ">
  <span >Menu</span>
</button>

CodePudding user response：

Several things

The biggest is the position absolute with values that are not working at all

Also I would not use the same ID and CLASS for the nav - you now have ID, CLASS and TAGNAME all nav

let $nav = $("#nav");
let $navToggle = $("#navToggle");
$navToggle.on("click", function(event) {
  event.preventDefault();
  $nav.toggleClass("show");
});

.works__item {
  width: 50%;
}

.burger {
  display: flex;
}

.nav {
  display: none;
  width: 100%;
  flex-direction: column;
  background-color: #31344e;
  text-align: right;
  position: relative;
}

.nav a { color:white;}

.nav.show {
  display: block;

}

.nav__link {
  padding: 9px 15px;
}

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

<nav  id="nav">
  <a href="#"  data-scroll="#features">Features</a>
  <a href="#"  data-scroll="#works">Works</a>
  <a href="#"  data-scroll="#team">Our Team</a>
  <a href="#"  data-scroll="#reviews">Reviews</a>
  <a href="#"  data-scroll="#download">Download</a>
</nav>

<button  type="button" id="navToggle">
  <span >Menu</span>
</button>

CodePudding user response：

You can do this more shortly like the following piece of code.

navToggle.on('click', function() {
   nav.toggle();
});

If you wish (and maybe it's already done) you can check the jquery documentation to fully understand how "toggle()" function work. https://api.jquery.com/toggle/