So I was trying to make a cross for my menu but it doesn't seem to be working. Here is the code and I am also using js to rotate it by 45 deg: Even after changing the origin it is not working and refuses to make a perfect cross. IMAGE OF THE CROSS
JS:
document.addEventListener('DOMContentLoaded', function(){
let nav = document.getElementById('nav-toogle')
let bars = document.querySelectorAll(".open")
let active = false;
document.querySelector('#nav_menu').addEventListener('click', function(){
if(!active){
bars[0].style.transform = "rotate(45deg)"
bars[1].style.opacity = "0"
bars[2].style.transform = "rotate(-45deg)"
nav.style.maxHeight = "0vh";
nav.style.minHeight = "100vh";
active = true;
}
else{
bars[0].style.transform = "rotate(0deg)"
bars[1].style.opacity = "1"
bars[2].style.transform = "rotate(0deg)"
nav.style.minHeight = "0vh";
nav.style.maxHeight = "0vh";
active = false;
HTML:
<div class="menu" id="nav_menu">
<span class="open"></span>
<span class="open"></span>
<span class="open"></span>
</div>
CSS:
.open{
width: 30px;
height: 1px;
background-color: var(--secondary);
margin-bottom: 5px;
transform-origin: left;
}
.menu{
position: fixed;
top: 3.5em;
right: 3.5em;
width: 30px;
height: 30px;
display:none;
cursor: pointer;
justify-content: center;
align-items: center;
}
Doing styling in JS can get messy fast so I recommend toggling a css class
const navMenu = document.getElementById('nav_menu');
navMenu.addEventListener('click', function() {
navMenu.classList.toggle("cross");
})
For the css you don't need the tranform-origin. A translateY is enough here
#nav_menu.cross .open:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
#nav_menu.cross .open:nth-child(2) {
opacity: 0;
}
#nav_menu.cross .open:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}