I have created a unique hamburger menu that, when clicked, rotates two of its children and hides one. The dimensions of the hamburger are 30px in width and 13px in height. However, there is an issue where only the central area of the "X" is clickable due to the increased height after rotation.
How can I ensure that the entire "X" remains clickable?
var hamburger = document.getElementById("menu-icon-css");
var menuMobile = document.getElementById("menu-links");
hamburger.addEventListener("click", function open() {
hamburger.classList.toggle("rotate");
})#menu-icon-css {
z-index: 50;
margin-top: 50px;
width: 30px;
height: 13px;
position: relative;
cursor: pointer;
display: block;
}
#menu-icon-css span {
transition: 0.3s all ease-in-out;
height: 3px;
background-color: #000;
position: absolute;
width: 100%;
}
#menu-icon-css span:nth-child(1) {
top: 0;
}
#menu-icon-css span:nth-child(2) {
top: 6px;
width: 70%;
right: 0;
}
#menu-icon-css span:nth-child(3) {
top: 12px;
}
@media screen and (min-width: 920px) {
#menu-icon-css {
display: none;
}
}
#menu-icon-css.rotate span:nth-child(1) {
transform: rotate(135deg);
top: 6px;
}
#menu-icon-css.rotate span:nth-child(2) {
opacity: 0;
transition: 0.1s all ease-in-out;
}
#menu-icon-css.rotate span:nth-child(3) {
transform: rotate(-135deg);
top: 6px;
}<div id="menu-icon-css">
<span></span>
<span></span>
<span></span>
</div>I will provide a screenshot of the issue using Inspect.
https://i.sstatic.net/xjpuA.png
Thank you!