Navbar won't toggle?

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", () => {

@media (max-width: 768px)
display: block;
width: 100%;
display: none;
ul li
display: block;
text-align: center;
display: block;


<div class=“toggle”>

<i class=“fa fa-bars menu” aria-hidden=“true”></i>



<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>



What a bonehead mistake. I thought classList.toggle took the parameter as a CSS selector. Knew it was something simple, the code looked right. Hope this helps someone in the future!