As a novice in web development, I came across a Figma design that required me to create a menu similar to this = menu image (shown in the first image below), which then transitions into an X cross menu image (displayed as the second image below):
https://i.sstatic.net/Q6PLkVnZ.png
https://i.sstatic.net/zCfpdJ5n.png
Below is the CSS code that I have implemented. While it successfully transforms the menu to an X shape, the alignment is not quite right. Here are images of my equal menu and cross menu for reference: equal menu image & cross menu image.
header {
background-color: #000000;
width: auto;
height: 114px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
/* font-size: calc(10px + 2vmin); */
padding: 0px 40px;
}
.logo {
width: auto;
height: auto;
}
/* .hamburger {
width: auto;
}
.line {
width: 44px;
border: 2px solid #ffffff;
border-radius: 10px;
} */
.hamburger {
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
/* Adjust gap for better spacing */
width: 44px;
height: 44px;
text-align: center;
}
.line {
width: 100%;
height: 4px;
/* Thickness of the lines */
text-align: center;
background-color: #ffffff;
/* Color of the lines */
border-radius: 10px;
transition: all 0.3s ease;
/* Smooth transition */
position: relative;
/* Position relative for absolute positioning of lines */
}
.hamburger.active .line1 {
transform: rotate(45deg) translate(5px, 5px);
/* Rotate and move the first line */
}
.hamburger.active .line2 {
transform: rotate(-45deg) translate(5px, -5px);
/* Rotate and move the second line */
}<header>
<div className="logo">
<img src={LogoSvg} alt="stan+vision logo" width={ "165px"} height={ "24px"} />
</div>
<div role="button" className={`hamburger ${isActive ? "active" : ""}`} onClick={toggleMenu}>
<div className="line line1"></div>
<div className="line line2"></div>
</div>
<div>
<button>Theme</button>
</div>
</header>