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 class="nav" 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 class="nav" id="nav">
<a href="#" class="nav__link" data-scroll="#features">Features</a>
<a href="#" class="nav__link" data-scroll="#works">Works</a>
<a href="#" class="nav__link" data-scroll="#team">Our Team</a>
<a href="#" class="nav__link" data-scroll="#reviews">Reviews</a>
<a href="#" class="nav__link" data-scroll="#download">Download</a>
</nav>
<button class="burger" type="button" id="navToggle ">
<span class="burger__item">Menu</span>
</button>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 class="nav" id="nav">
<a href="#" class="nav__link" data-scroll="#features">Features</a>
<a href="#" class="nav__link" data-scroll="#works">Works</a>
<a href="#" class="nav__link" data-scroll="#team">Our Team</a>
<a href="#" class="nav__link" data-scroll="#reviews">Reviews</a>
<a href="#" class="nav__link" data-scroll="#download">Download</a>
</nav>
<button class="burger" type="button" id="navToggle">
<span class="burger__item">Menu</span>
</button>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/