Hamburger menu doesn't collapse on click any link in mobile-CodePudding

I am building a website and ran across this issue. I have a basic navbar which when viewed on mobile appears like a hamburger menu. The menu works fine. I have used pure HTML-CSS code for making this navbar. The issue is that the navbar is not closing when I click any link on the menu to navigate to a different section of the page.

HTML:

<header >
    <div >
        <nav>
          <input type="checkbox" id="nav" >
          <label for="nav" >
            <i></i>
            <i></i>
            <i></i>
          </label>

          <div >
            <ul>
                <li><a href="#home">HOME</a></li>
                <li><a href="#mint">MINT</a></li>
                <li><a href="#community">COMMUNITY</a></li>
                <li><a href="#projects">PROJECTS</a></li>
                <li><a href="#faq">FAQ</a></li>
              </ul>
          </div>
        </nav>
    </div>
</header>

CSS

header {
text-align: right;
-webkit-transition: all .5s;
transition: all .5s;
height: 65px;}
nav {
  
padding: 8px;

}
nav ul {

margin-bottom: 0;
float:right;
-webkit-transition: all .5s;
transition: all .5s; 
}

nav ul li {
display: inline-block;
float: left;
 }

nav li {
display: inline-block;
margin: 0.75em;
}

nav ul li:last-child {
margin-right: 24px;
}

nav ul li a {
display: inline-block;
outline: none;
color: rgb(255, 255, 255);
text-transform: uppercase;
text-decoration: none;
font-size: 1.2em;
align-content: space-between;
   
font-weight: 600;
}

@media screen and (max-width: 864px) {
.logo {
  padding:0;
}

.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgb(0, 0, 0);
    opacity: 0;
   transition: all 0.2s ease;
    
  }
  .nav-wrapper ul {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
  }

  .nav-wrapper ul li {
    display: block;
    float: none;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
  }


.nav-wrapper ul li:nth-child(1) a {
 transition-delay: 0.2s;
 }
  
 .nav-wrapper ul li:nth-child(2) a {
  transition-delay: 0.3s;
  }
  
 .nav-wrapper ul li:nth-child(3) a {
  transition-delay: 0.4s;
 }
  
.nav-wrapper ul li:nth-child(4) a {
 transition-delay: 0.5s;
 }

 .nav-wrapper ul li:nth-child(5) a {
 transition-delay: 0.6s;
 }


.nav-wrapper ul li:not(:first-child) {
 margin-left: 0;
 }
  
.nav-wrapper ul li a {
 padding: 10px 24px;
 opacity: 0;
 color: rgb(255, 255, 255);
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 1.2px;
 transform: translateX(-20px);
 transition: all 0.2s ease;
 }
  
.nav-btn {
 position: fixed;
 right: 10px;
 top: 10px;
 display: block;
 width: 48px;
 height: 48px;
 cursor: pointer;
 z-index: 9999;
 border-radius: 50%;
 }
  
.nav-btn i {
 display: block;
 width: 20px;
 height: 2px;
 background: rgb(255, 255, 255);
 border-radius: 2px;
 margin-left: 14px;
}
  
.nav-btn i:nth-child(1) {
 margin-top: 16px;
}
  
.nav-btn i:nth-child(2) {
 margin-top: 4px;
 opacity: 1;
}
  
.nav-btn i:nth-child(3) {
 margin-top: 4px;
}

}
  
 #nav:checked   .nav-btn {
 transform: rotate(45deg);
  
 }

 #nav:checked   .nav-btn li {
 background: #000;
 transition: transform 0.2s ease;
 }

 #nav:checked   .nav-btn i:nth-child(1) {
 transform: translateY(6px) rotate(180deg);
 }

 #nav:checked   .nav-btn i:nth-child(2) {
  opacity: 0;
 }

 #nav:checked   .nav-btn i:nth-child(3) {
 transform: translateY(-6px) rotate(90deg);
 }

 #nav:checked   .nav-btn i:nth-child(4) {
 opacity: 0;
 }

 #nav:checked ~ .nav-wrapper {
 z-index: 9990;
 opacity: 1;
 }

 #nav:checked ~ .nav-wrapper ul li a {
 opacity: 1;
 transform: translateX(0);
 }

.hidden {
 display: none;
 } 

  .bg-nav {
  background: #000;

  }

 .bg-nav ul {
  padding: 10px;
  }

`

Sorry for the long codes Since I am a beginner with near to no experience in JS I would like to know if there is any solution for this. Is there any solution in CSS for this or do we need to use JS. Any help would be appreciated

CodePudding user response：

I don't think you can do it with CSS only as it would require child -> parent relation.

If you are ok to use JS you can just set "false" to the #nav checkbox

const onLinkClick = () => {
  document.querySelector("#nav").checked = false; // Once link is clicked -> make #nav checkbox false thus close the menu
};

document
  .querySelectorAll(".nav-wrapper a") // Grab all links
  .forEach((element) => element.addEventListener("click", onLinkClick)); // Listen for click on them