Hamburger funciona en el escritorio, pero no se activa en el móvil.
Intenté agregar otro detector de eventos para 'touchstart' pero eso tampoco parece hacer nada.
const menuBtn = document.querySelector('.hambody'); let menuOpen = false; menuBtn.addEventListener('click', () => { if (!menuOpen) { menuBtn.classList.add('open'); menuOpen = true; console.log('triggered') } else { menuBtn.classList.remove('open'); menuOpen = false; console.log('triggered') } }); * { margin: 0; padding: 0; box-sizing: border-box; } @media (min-width:1024px) { .hambody { display: flex; justify-content: center; align-items: center; height: 60px; z-index: 1000000000000; } } @media(max-width:1024px) { .hambody { display: flex; justify-content: end; align-items: flex-end; height: 60px; z-index: 1000000000000; } } .menu-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; cursor: pointer; transition: all .5s ease-in-out; /* border: 3px solid #fff; */ } .menu-btn__burger_1 { width: 50px; height: 2px; background: #A67E51; border-radius: 0px; transition: all .5s ease-in-out; } .menu-btn__burger_2 { content: ''; position: absolute; width: 50px; height: 2px; background: #A67E51; border-radius: 0px; transition: all .5s ease-in-out; } .menu-btn__burger {} .menu-btn__burger_1 { transform: translateY(-15px); } /* ANIMATION */ .menu-btn.open .menu-btn__burger_1 { transform: translateY(-5px) rotate(-30deg); } .menu-btn.open .menu-btn__burger_2 { transform: translateY(5px) rotate(30deg); } .menu-btn.open .menu-btn__burger { transform: rotate(-20deg); } .menu-btn.open .menu-btn__burger::after { transform: rotate(20deg); } <div class="hambody"> <a href="#menu-popup"> <div class="menu-btn"> <div class="menu-btn__burger_1"></div> <div class="menu-btn__burger_2"></div> </div> </a> </div>Sitio en vivo: https://dev7.devbot.co.za
el problema es porque agrega .open class al elemento .hambody , mientras que en los códigos css la animación comienza en .menu-btn.open y debe agregar open class a .main-btn .
const menuBtnLink = document.querySelector('.hambody'); const menuBtn = document.querySelector('.menu-btn'); let menuOpen = false; menuBtnLink.addEventListener('click', () => { if (!menuOpen) { menuBtn.classList.add('open'); menuOpen = true; console.log('triggered') } else { menuBtn.classList.remove('open'); menuOpen = false; console.log('triggered') } }); * { margin: 0; padding: 0; box-sizing: border-box; } @media (min-width:1024px) { .hambody { display: flex; justify-content: center; align-items: center; height: 60px; z-index: 1000000000000; } } @media(max-width:1024px) { .hambody { display: flex; justify-content: end; align-items: flex-end; height: 60px; z-index: 1000000000000; } } .menu-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; cursor: pointer; transition: all .5s ease-in-out; /* border: 3px solid #fff; */ } .menu-btn__burger_1 { width: 50px; height: 2px; background: #A67E51; border-radius: 0px; transition: all .5s ease-in-out; } .menu-btn__burger_2 { content: ''; position: absolute; width: 50px; height: 2px; background: #A67E51; border-radius: 0px; transition: all .5s ease-in-out; } .menu-btn__burger {} .menu-btn__burger_1 { transform: translateY(-15px); } /* ANIMATION */ .menu-btn.open .menu-btn__burger_1 { transform: translateY(-5px) rotate(-30deg); } .menu-btn.open .menu-btn__burger_2 { transform: translateY(5px) rotate(30deg); } .menu-btn.open .menu-btn__burger { transform: rotate(-20deg); } .menu-btn.open .menu-btn__burger::after { transform: rotate(20deg); } <div class="hambody"> <a href="#menu-popup"> <div class="menu-btn"> <div class="menu-btn__burger_1"></div> <div class="menu-btn__burger_2"></div> </div> </a> </div>Como sugiere evolutionxbox, use un botón:
* { margin: 0; padding: 0; box-sizing: border-box; } @media (min-width:1024px) { .hambody { display: flex; justify-content: center; align-items: center; height: 60px; z-index: 1000000000000; } } @media(max-width:1024px) { .hambody { display: flex; justify-content: end; align-items: flex-end; height: 60px; z-index: 1000000000000; } } .menu-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; cursor: pointer; transition: all .5s ease-in-out; /* border: 3px solid #fff; */ } .menu-btn__burger_1 { width: 50px; height: 2px; background: #A67E51; border-radius: 0px; transition: all .5s ease-in-out; } .menu-btn__burger_2 { content: ''; position: absolute; width: 50px; height: 2px; background: #A67E51; border-radius: 0px; transition: all .5s ease-in-out; } .menu-btn__burger {} .menu-btn__burger_1 { transform: translateY(-15px); } /* ANIMATION */ .menu-btn.open .menu-btn__burger_1 { transform: translateY(-5px) rotate(-30deg); } .menu-btn.open .menu-btn__burger_2 { transform: translateY(5px) rotate(30deg); } .menu-btn.open .menu-btn__burger { transform: rotate(-20deg); } .menu-btn.open .menu-btn__burger::after { transform: rotate(20deg); } <div class="hambody"> <button onclick="querySelector('.menu-btn').classList.toggle('open')"> <div class="menu-btn"> <div class="menu-btn__burger_1"></div> <div class="menu-btn__burger_2"></div> </div> </button> </div>