Menu hamburger javascript doesn't work properly

Question

what is wrong with this code? Icons don't change after click and there is no contents after reveal menu. There are no errors in console.

 const nav_ = document.querySelector('nav'); const burger = document.querySelector('.burger'); const burgerIco = document.querySelector('.fa-bars'); const closeIco = document.querySelector('.fa-times'); const active_toggle = function() { nav_.classList.toggle('active'); burger.classList.toggle('active'); if (burger.classList.contains('active')) { burgerIco.classList.add('hide'); closeIco.classList.remove('hide'); } else { burgerIco.classList.remove('hide'); closeIco.classList.add('hide'); } }; burger.addEventListener('click', active_toggle);

 * { box-sizing: border-box; margin: 0; padding: 0; --color: rgb(175, 43, 19); } body { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; font-family: 'Montserrat', sans-serif; color: rgb(255, 255, 255); background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%); font-size: 20px; } h1 { text-transform: uppercase; } nav { position: absolute; height: 100vh; width: 350px; left: -350px; background-image: linear-gradient(315deg, #bf033b 0%, #ffc719 74%); transition: transform.3s; } nav ul { margin-top: 50px; list-style: none; } nav a { display: block; padding: 10px 30px; color: #333; text-decoration: none; } nav a:hover { font-weight: bold; }.burger { position: absolute; top: 0; left: 0; padding: 10px 20px; font-size: 36px; background: none; border: none; cursor: pointer; color: #fff; transition: transform.3s; }.active { transform: translateX(350px) }.hide { display: none; }

 <script src="https://kit.fontawesome.com/d3cc5ed543.js"></script> <button class="burger"> <i class="fas fa-bars"></i> <i class="fas fa-times hide"></i> </button> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Produkty</a></li> <li><a href="#">Cennik</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav>

edit. i removed dots, now content is ok but icons still don;t change

Answer 1

This is because your .hide css is overwritten please make it important or add css like i.hide {//css}

 const nav_ = document.querySelector('nav'); const burger = document.querySelector('.burger'); const burgerIco = document.querySelector('.fa-bars'); const closeIco = document.querySelector('.fa-times'); const active_toggle = function() { nav_.classList.toggle('active'); burger.classList.toggle('active'); if (burger.classList.contains('active')) { burgerIco.classList.add('hide'); closeIco.classList.remove('hide'); } else { burgerIco.classList.remove('hide'); closeIco.classList.add('hide'); } }; burger.addEventListener('click', active_toggle);

 * { box-sizing: border-box; margin: 0; padding: 0; --color: rgb(175, 43, 19); } body { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; font-family: 'Montserrat', sans-serif; color: rgb(255, 255, 255); background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%); font-size: 20px; } h1 { text-transform: uppercase; } nav { position: absolute; height: 100vh; width: 350px; left: -350px; background-image: linear-gradient(315deg, #bf033b 0%, #ffc719 74%); transition: transform.3s; } nav ul { margin-top: 50px; list-style: none; } nav a { display: block; padding: 10px 30px; color: #333; text-decoration: none; } nav a:hover { font-weight: bold; }.burger { position: absolute; top: 0; left: 0; padding: 10px 20px; font-size: 36px; background: none; border: none; cursor: pointer; color: #fff; transition: transform.3s; }.active { transform: translateX(350px) } i.hide { display: none; }

 <script src="https://kit.fontawesome.com/d3cc5ed543.js"></script> <button class="burger"> <i class="fas fa-bars"></i> <i class="fas fa-times hide"></i> </button> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Produkty</a></li> <li><a href="#">Cennik</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav>