My Hamburger menu navigation isnt closing after clicking on link-CodePudding

I followed youtube tutorial, becouse I a m new and still learning front-end. When the menu is on deskop resolution, it is in a line, but when it gets to mobile resolution it changes to hamburger menu. Is is working fine, but after I click some link, I want it to close, becouse otherwise you cant see the content of the page.

nav {
height: 75px;
width: 100%;
background-color: #171c1f;
display: flex;
justify-content: space-between;
z-index: 99;
}
.logo-container {
display: flex;
align-items: center;
width: auto;
margin: 0;
}
.logo-txt {
font-size: 35px;
line-height: 75px;
padding-left: 30px;
font-family: 'Signika Negative', sans-serif;
font-weight: bold;
color: rgb(255, 255, 255);
cursor: pointer;
}
.nav-list {
position: fixed;
width: 100%;
height: 0vh;
top: 75px;
background: #4a499e;
float: right;
text-align: center;
transition: all .5s;
z-index: 2;
}
.nav-list li {
opacity: 0;
line-height: 30px;
margin: 50px 0;
transition: all .5s;
}
.nav-list li a {
color: #fff;
font-size: 27.5px;
text-transform: uppercase;
text-decoration: none;
font-weight: 900;
transition: .5s;
}
.nav-list li a.active,.nav-list li a:hover{
color: #00b1f7;
transition: 0.5s;
}
.hamburger-btn {
display: block;
font-size: 30px;
color: white;
float: right;
line-height: 75px;
margin-right: 40px;
cursor: pointer;
}
#check {
display: none;
}
#check:checked ~ .nav-list {
height: 100vh;
}
#check:checked ~ .nav-list li {
opacity: 1;
}
@media only screen and (min-width: 1100px) {
nav{
height: 100px;
background-color: transparent;
}

.hamburger-btn{
display: none;
}

.nav-list {
position: relative;
height: 100px;
top: 0;
background: none;
float: right;
text-align: right;
margin-right: 25px;
transition: none;
text-shadow: 2px 2px 3px #00b1f7;
}

.nav-list li a {
color: rgb(0, 0, 0);
font-size: 27.5px;
text-transform: uppercase;
text-decoration: none;
font-weight: 900;
}

.nav-list li{
display: inline-block;
opacity: 1;
line-height: 100px;
margin: 0 20px;
transition: none;
}

.nav-list li a.active, .nav-list li a:hover {
color: #00b1f7;
text-shadow: 1px 1px #000000;
}

.logo-txt {
font-size: 35px;
line-height: 75px;
padding-left: 30px;
font-family: 'Signika Negative', sans-serif;
font-weight: bold;
color: rgb(0, 0, 0);
cursor: pointer;
} 
}

 <header>
    <nav>
        <div >
            <label >Autirock</label>
        </div>
        <input type="checkbox" id="check">
        <label for="check" >
            <i ></i>
        </label>
        <ul >
            <li><a  href="#banner">DOMŮ</a></li>
            <li><a href="#sluzby-a-pomucky">SLUŽBY A POMŮCKY</a></li>
            <li><a href="#">O MNĚ</a></li>
            <li><a href="#cenik-a-sluzby">CENÍK</a></li>
            <li><a href="#kontakt">KONTAKT</a></li>
        </ul>
    </nav>
</header>

CodePudding user response：

That's a nice idea for hamburger menu. But you will need javascript to close it when clicking on a link. That's what I did. It is operated using a checkbox, so I unchecked it.

document.querySelectorAll(".nav-list li a").forEach(function(elem) {
  elem.addEventListener('click', function(ev) {
    document.getElementById("check").checked = false;
  });

})

nav {
  height: 75px;
  width: 100%;
  background-color: #171c1f;
  display: flex;
  justify-content: space-between;
  z-index: 99;
}

.logo-container {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
}

.logo-txt {
  font-size: 35px;
  line-height: 75px;
  padding-left: 30px;
  font-family: 'Signika Negative', sans-serif;
  font-weight: bold;
  color: rgb(255, 255, 255);
  cursor: pointer;
}

.nav-list {
  position: fixed;
  width: 100%;
  height: 0vh;
  top: 75px;
  background: #4a499e;
  float: right;
  text-align: center;
  transition: all .5s;
  z-index: 2;
}

.nav-list li {
  opacity: 0;
  line-height: 30px;
  margin: 50px 0;
  transition: all .5s;
}

.nav-list li a {
  color: #fff;
  font-size: 27.5px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 900;
  transition: .5s;
}

.nav-list li a.active,
.nav-list li a:hover {
  color: #00b1f7;
  transition: 0.5s;
}

.hamburger-btn {
  display: block;
  font-size: 30px;
  color: white;
  float: right;
  line-height: 75px;
  margin-right: 40px;
  cursor: pointer;
}

#check {
  display: none;
}

#check:checked~.nav-list {
  height: 100vh;
}

#check:checked~.nav-list li {
  opacity: 1;
}

@media only screen and (min-width: 1100px) {
  nav {
    height: 100px;
    background-color: transparent;
  }
  .hamburger-btn {
    display: none;
  }
  .nav-list {
    position: relative;
    height: 100px;
    top: 0;
    background: none;
    float: right;
    text-align: right;
    margin-right: 25px;
    transition: none;
    text-shadow: 2px 2px 3px #00b1f7;
  }
  .nav-list li a {
    color: rgb(0, 0, 0);
    font-size: 27.5px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 900;
  }
  .nav-list li {
    display: inline-block;
    opacity: 1;
    line-height: 100px;
    margin: 0 20px;
    transition: none;
  }
  .nav-list li a.active,
  .nav-list li a:hover {
    color: #00b1f7;
    text-shadow: 1px 1px #000000;
  }
  .logo-txt {
    font-size: 35px;
    line-height: 75px;
    padding-left: 30px;
    font-family: 'Signika Negative', sans-serif;
    font-weight: bold;
    color: rgb(0, 0, 0);
    cursor: pointer;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<header>
  <nav>
    <div >
      <label >Autirock</label>
    </div>
    <input type="checkbox" id="check">
    <label for="check" >
                <i ></i>
            </label>
    <ul >
      <li><a  href="#banner">DOMŮ</a></li>
      <li><a href="#sluzby-a-pomucky">SLUŽBY A POMŮCKY</a></li>
      <li><a href="#">O MNĚ</a></li>
      <li><a href="#cenik-a-sluzby">CENÍK</a></li>
      <li><a href="#kontakt">KONTAKT</a></li>
    </ul>
  </nav>
</header>