How do I link my navigation to the toggle? - html

Question

Coded a webpage as practice using some JS, everything works how I'd like except I can't figure out how to make the toggle functional. I tried a few things but it didn't work out. The page collapses, the toggle appears, but when you click on it the nav does not pop up.
Tips and suggestions would be great, thanks for your time and patience!
Link to all code on codepen here
snippet of html below
<nav class="navbar navbar-expand-lg px-4" style="font-size:25px;">
<a class="navbar-brand"></a>
<button class="navbar-toggler" data-toggle="collapse" href="myNav" role="button" type="button" >
<span class="toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto text-capitalize">
<li class="nav-item active">
<a class="nav-link" style="font-size:35px;" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link " style="font-size:35px;" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-size:35px;" href="#store">store</a>
</li>
</ul>
<div class="nav-info-items d-none d-lg-flex ">
<div class="nav-info align-items-center d-flex justify-content-between mx-lg-5">
<span class="info-icon mx-lg-3"><i class="fas fa-phone"></i></span>
<p class="mb-0">+ 123 456 789</p>
</div>
<div id="cart-info" class="nav-info align-items-center cart-info d-flex justify-content-between mx-lg-5">
<span class="cart-info__icon mr-lg-3"><i class="fas fa-shopping-cart"></i></span>
<p class="mb-0 text-capitalize"><span id="item-count">2 </span> items - $<span class="item-total">10.49</span></p>
</div>
</div>
</div>
</nav>
snippet of css below
.navbar-toggler {
outline: none !important;
}
.toggler-icon {
font-size: 2.5rem;
color: var(--mainBlue);
}
.nav-link {
color: var(--mainBlue);
font-size: 1.5rem;
transition: all 0.5s ease-in-out;
}
.nav-link:hover {
color: var(--mainYellow);
}
.cart-info__icon {
color: var(--mainBlue);
cursor: pointer;
}

Answer 1

I think you want Element.classList.
var toggle = document.querySelector('.toggle');
var nav = document.querySelector('.nav');
toggle.onclick = function() {
nav.classList.toggle('collapsed');
}
.nav {
background: lightblue;
transition: .2s;
}
.nav.collapsed {
opacity: 0;
}
<button class="toggle">Toggle</button>
<div class="nav">
<ul>
<li>
home
</li>
<li>
about
</li>
<li>
store
</li>
</ul>
</div>