After trying numerous CSS and jQuery techniques without success, I am struggling to transform my hamburger menu into an X shape. Despite my efforts with rotating the lines using CSS or trying jQuery methods, I can't seem to get it right. The menu doesn't stay active and is often misaligned.
Below is a snippet of the HTML code:
<body>
<div class="acetrnt-toggle" data-click-state="1">
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
<div/>
</body>And here is the corresponding CSS code:
body {
background: blue;
}
.acetrnt-toggle {
cursor: pointer;
padding: 15px;
width: 60px;
}
.line-1, .line-2, .line-3 {
cursor: pointer;
border-radius: 4px;
height: 5px;
width: 60px;
background: #000;
position: relative;
display: block;
content: '';
}
.acetrnt-toggle:hover span {
cursor: pointer;
background: #e7e7e7;
}
.line-1, .line-2 {
margin-bottom: 10px;
}
.line-1, .line-2, .line-3 {
transition: all 300ms ease-in;
}If you'd like to view the full codepen example, click here.