I’m trying to toggle my navbar once it reaches it a certain size using vanilla js. Once the media query width is met, everything shrinks as per expected. The JS I wrote to toggle the navbar indicates that the bar is actually toggling classes but for some reason it won’t show display:block; Here is my code, any help would be greatly appreciated.
var menu = document.querySelector(".menu");
var ul = document.querySelector("ul");
menu.addEventListener("click", () => {
ul.classList.toggle(".active");
});
@media (max-width: 768px)
{
.toggle{
display: block;
}
ul{
width: 100%;
display: none;
}
ul li
{
display: block;
text-align: center;
}
.active{
display: block;
}
}
<nav>
<div class=“toggle”>
<i class=“fa fa-bars menu” aria-hidden=“true”></i>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>