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

Question

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 class="logo-container">
<label class="logo-txt">Autirock</label>
</div>
<input type="checkbox" id="check">
<label for="check" class="hamburger-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="nav-list">
<li><a class="active" href="#banner">DOMŮ</a></li>
<li>SLUŽBY A POMŮCKY</li>
<li>O MNĚ</li>
<li>CENÍK</li>
<li>KONTAKT</li>
</ul>
</nav>
</header>

Answer 1

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 class="logo-container">
<label class="logo-txt">Autirock</label>
</div>
<input type="checkbox" id="check">
<label for="check" class="hamburger-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="nav-list">
<li><a class="active" href="#banner">DOMŮ</a></li>
<li>SLUŽBY A POMŮCKY</li>
<li>O MNĚ</li>
<li>CENÍK</li>
<li>KONTAKT</li>
</ul>
</nav>
</header>