<div class="header__burger-main">
<span class="header__burger-firstline"></span>
<span class="header__burger-secondline"></span>
<span class="header__burger-thirdline"></span>
</div>
.header__burger-main{
display: block;
position: relative;
margin-left: 8px;
padding: 14px 12px;
cursor:pointer;
max-height: 12px;
}
.header__burger-firstline,
.header__burger-secondline,
.header__burger-thirdline{
display: block;
position: absolute;
height: 3px;
background: #000;
border-radius: 25px;
}
.header__burger-firstline {
top:0;
width: 16px;
}
.header__burger-firstline.active{
transform: rotate(45deg);
top:13px;
}
.header__burger-secondline {
top:12px;
width: 8px;
}
.header__burger-secondline.passive{
display: none;
}
.header__burger-thirdline {
width: 16px;
bottom: 6px;
}
.header__burger-thirdline.active {
transform: rotate(-45deg);
bottom: 13px;
}
const burgerFirst = document.querySelector('.header__burger-firstline');
const burgerSecond = document.querySelector('.header__burger-secondline');
const burgerThird = document.querySelector('.header__burger-thirdline');
const elemTest = document.querySelector('.header__burger-main');
elemTest.addEventListener('click', function(){
burgerFirst.classList.toggle('active');
burgerSecond.classList.toggle('passive');
burgerThird.classList.toggle('active');
});