не по центру крестик ( появляется после клика на бургер) и после клика будто подлагивает он
$(document).ready(function() {
$('.btn--menu').on('click', function() {
$('.line-burger').toggleClass('line-active');
$('.header__list').slideToggle(500);
});
});
.line-burger {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
width: 20px;
height: 1px;
background-color: #717171;
transition: 0.5s width;
}
.line-burger:after, .line-burger:before {
content: '';
position: absolute;
width: 20px;
height: 1px;
background-color: #717171;
left: 0;
transition: 0.5s;
}
.line-burger:after {
top: calc(100% + 7px);
}
.line-burger:before {
bottom: calc(100% + 7px);
}
.line-active {
width: 0;
left: 0px;
transform: none;
}
.line-active:after {
top: 6px;
transform: rotate(-45deg);
transform-origin: 0 0;
}
.line-active:before {
bottom: 8px;
transform: rotate(45deg);
transform-origin: 0 100%;
}
.btn--menu {
display: block;
position: relative;
cursor: pointer;
width: 25px;
height: 25px;
background-color: transparent;
padding: 0px;
}
* {
box-sizing: border-box;
}
*::after, *::before {
box-sizing: border-box;
}
<button class="btn btn--menu"><span class="line-burger"></span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>