Hamburger auto close

Hi Everyone,

I am working on a simple hamburger using an animated hamburger menu. I have it opening and closing fine however the animation never returns to the initial state after clicking/pressing a navigation option. It remains as an X instead of going back to the initial state for a normal hamburger menu.

HTML

“`
<div class=”wrapper”>
<label class=”burger”>
<input class=”checker” type=”checkbox” onclick=”toggleClass()”>
<span class=”line line_first”></span>
<span class=”line line_second”></span>
<span class=”line line_third”></span>
<span class=”line line_fourth”></span>
</label>
</div>

<div class=”ham-bar”>
<div id=”nav” class=”nav-bar”>
<div class=”item nav-item”><a href=”#header”><h6>Home</h6></a></div>
<div class=”item nav-item”><a href=”#about”><h6>Bio</h6></a></div>
<div class=”item nav-item”><a href=”#projects”><h6>Projects</h6></a></div>
<div class=”item nav-item”><a href=”#contact”><h6>Contact</h6></a></div>
</div>

<div id=”footer” class=”foot”>
<div class=”footer center-align”>
<div class=”icons”>
<a href=”tel:07847562981″><i class=”fas fa-phone icon”></i></a>
<a href=”mailto:[email protected]”><i class=”fas fa-inbox icon”></i></a>
<a href=”https://www.instagram.com/b.j.robinson98/” target=”_blank”><i class=”fab fa-instagram”></i></a>
<a href=”https://www.linkedin.com/in/benjamin-robinson-786661134/” target=”_blank”><i class=”fab fa-linkedin-in icon”></i></a>
<a href=”https://www.facebook.com/ben.robinson.9674227″ target=”_blank”><i class=”fab fa-facebook-f icon”></i></a>
</div>
</div>
</div>
</div>
“`

CSS

“`
.wrapper{
width: 4vw;
height: 5vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: fixed;
z-index: 2;
}

.burger{
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}

.line{
display: block;
width: 100%;
height: 20%;
background-color: #F8FFE9;
border-radius: 12px;
position: absolute;
transition: .3s all linear;
}

.checker{
display: none;
}

.line_second, .line_third{
top: 40%;
}

.line_fourth{
bottom: 0;
}

.checker:checked ~ .line_first, .checker:checked ~ .line_fourth{
opacity: 0;
}

.checker:checked ~ .line_second{
transform: rotate(45deg);
}

.checker:checked ~ .line_third{
transform: rotate(-45deg);
}
“`

Media Queries

“`
@media screen and (max-height: 1366px) and (orientation: portrait){
.wrapper {
width: 8vw;
height: 5vh;
right: 4vh;
top: 2vh;
}

.ham-bar{
display: none;
}

.ham-bar.toggle-ham{
display: block;
}

.ham-bar{
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
position: fixed;
z-index: 1;
}

.nav-bar{
top: 5vh;
}

.foot{
top: 8vh;
}

.foot, .nav-bar{
position: relative;
width: 100%;
text-align: center;
}

.nav-bar{
display: flex;
justify-content: center;
flex-direction: column;
}

.footer{
width: 100vw;
}

.item{
margin-top: -2vw;
position: relative;
}

.icons{
position: relative;
margin-left: 1vw;
}

.icon{
margin-right: 1vw;
}

i, h6{
font-size: 3vh;
}
}
“`

JavaScript

“`
let menu = document.querySelector(‘.ham-bar’);

function toggleClass () {
menu.classList.toggle(‘toggle-ham’)
}

const theLinks = document.querySelectorAll(“.item”);
theLinks.forEach(link => link.addEventListener(“click”, ()=>{
menu.classList.toggle(“toggle-ham”)
document.querySelector.remove(‘.checker’);
}))
“`

I am quite new to Javascript so not 100% sure on the Syntax. Any help on this would be greatly appreciated.

Thanks for looking,
Ben 🙂

Also in #JavaScript _↴