Блог

Закодировал веб-страницу в качестве практики, используя некоторые JS, все работает так, как мне хотелось бы, за исключением того, что я не могу понять, как сделать переключение функциональным. Я попробовал несколько вещей, но это не сработало. Страница сворачивается, появляется переключатель, но при нажатии на него навигация не появляется. Советы и предложения были бы замечательными, спасибо за ваше время и терпение!

Ссылка на весь код в codepen здесь

фрагмент html ниже

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

фрагмент css ниже

 .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;
}
  

Я думаю, вы хотите 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>
      <a href="#">home</a>
    </li>
    <li>
      <a href="#">about</a>
    </li>
    <li>
      <a href="#">store</a>
    </li>
  </ul>
</div>