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

RESOLVED***
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!