Make whole div with rotated elements clickable - html

Question

I created a hamburger menu that, when clicked, rotates two of its children and one is hidden. The hamburger has 30px width and 13px height. The thing is: when the two children rotate, the height increases, but only the central area (which is 30px/13px is clickable).
How can I make the whole "X" 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'll leave a print of the issue on Inspect.
Thank you!

Answer 1

Try a few tweaks on the main top margin, height of the menu-icon-css div, and the position of the child elements, such as the following. (The lines in your code that I changed, I commented out and replaced with a line containing my changes.)
#menu-icon-css {
z-index: 50;
//margin-top: 50px;
margin-top: 42px;
width: 30px;
//height: 13px;
height: 30px;
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;
top: 14px;
}
#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;
top: 14px;
}