After checking out some online tutorials, I managed to get a hamburger menu working. However, I encountered an issue with the X icon not being symmetrical after the animation from 3 bars to an X.
Here is the comparison:
Before: https://gyazo.com/351864d80fda15dfa2745ca1d1daa433
After: https://gyazo.com/7122592ea36e3f36d37d0779f4687a61
In the second image, it can be seen that the right side appears smaller than the left side in the angle created. Both spans or lines have the same rotation angle and dimensions, but it seems like the central axis of rotation might be slightly off. If the central axis could be shifted a few pixels to the left, around 2-3 pixels, it might solve the problem. However, I am unsure if this adjustment is feasible.
Below is the HTML code:
<div id="burger-menu-wrapper">
<a id="nav-toggle" class="js-menu-click" href="#">
<div class="hamburger-menu">
<span></span>
</div>
<h5>MENU</h5>
</a>
</div>
And here is the corresponding CSS:
#nav-toggle .hamburger-menu{
height:46px;
position:relative;
top:23px;
}
#nav-toggle .hamburger-menu span{
margin:0 auto;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 35px;
background: #000000;
position: relative;
display: block;
content: '';
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -8px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
Edit: Added HTML