I have this navigation menu I made with html and scss, however everything works fine, but when I click on the links inside the nav-menu, the navigation menu does not close for the page content to show. It still overlays the content on the page. In a nutshell, I want the navigation menu to close and when a link is clicked.
My HTML code
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
<div class="navigation__background"> </div>
<div class="navigation__nav">
<div class="container-fluid" id="hd">
<div class="row">
<div class="col-9 col-md-5 col-lg-5" id="both">
<h6 class="fw-b" id="in-nav">-on the web- </h6>
<div class="social-links fs-5 mb-4 end text-dark">
<i class="bi bi-twitter"></i>
<i class="bi bi-facebook"></i>
<i class="bi bi-github"></i><br>
<i class="bi bi-linkedin"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-medium"></i>
</div>
<div class="mb-4">
<a class="resume" href="afolabi-resume.pdf" target="_blank" rel="noopener noreferrer">Resume </a>
</div>
</div>
<div class="col-5 col-md-6 col-lg-6">
<div class="list">
<h6 class="fw-b" id="in-nav" style="margin-left:2rem;">-navigation-</h6>
<ul class="ul">
<li class="list-item"><a href="/" id="c" >Home</a></li>
<li class="list-item"><a href="#projects" id="c">Projects</a></li>
<li class="list-item"><a href="#stacks" id="c">Stacks</a></li>
<li class="list-item"><a href="#social-links" id="c">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div> ```
**SCSS**
.navigation {
overflow-y: hidden;
&__checkbox {
display: none;
}
&__button {
background-color: rgb(0, 0, 0);
height: 4.5rem;
width: 4.5rem;
border-radius: 50%;
position: fixed;
top: 2rem;
right: 6rem;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(#000, .2);
text-align: center;
cursor: pointer;
}
&__background {
z-index: 500;
background-color: #006274;
background-image: url("download.png");
background-size: 20px;
animation: bg1 150s linear 1s infinite alternate-reverse;
height: 2.8rem;
width: 2.8rem;
border-radius: 50%;
position: fixed;
top: 3.2rem;
right: 6.8rem;
transition: transform .9s cubic-bezier(0.86, 0, 0.07, 1);
}
@keyframes bg1{
0% {background-position: 0 0;}
50% {transform: rotate(300deg 50deg);}
100% {background-position: 170px 0;}
}
&__nav {
height: 100vh;
position: fixed;
top: 6.5rem;
left: 0;
z-index: 1500;
opacity: 0;
width: 0;
transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
&__checkbox:checked ~ &__background {
transform: scale(80);
}
&__checkbox:checked ~ &__nav {
opacity: 1;
width: 100%;
}
&__icon {
right: -.2rem;
width: 50rem;
position: relative;
margin-top: 2.3rem;
&{
width: 2rem;
height: 2.3px;
background-color: rgb(255, 255, 255);
display: inline-block;
}
&::before,
&::after {
width: 1.5rem;
height: 2.3px;
background-color: rgb(255, 255, 255);
display: inline-block;
}
&::before,
&::after {
content: "";
position: absolute;
left: 0;
transition: all .2s;
}
&::before { top: -.6rem }
&::after { bottom: -.65rem }
}
&__button:hover &__icon::before {
top: -.85rem;
}
&__button:hover &__icon::after {
bottom: -.9rem;
}
&__checkbox:checked + &__button &__icon {
background-color: transparent;
}
&__checkbox:checked + &__button &__icon::before {
transform: rotate(135deg);
top: 0;
}
&__checkbox:checked + &__button &__icon::after {
transform: rotate(-135deg);
bottom: 0;
}
}
//navigation list
#hd {
margin-top: 2rem;
}
.resume{
font-size: 2rem;
color: #e7e7e7;
font-family: "montserrat-regular", sans-serif;
letter-spacing: -2px;
transition: all .2s ease-in-out;
}
.resume:hover {
text-align: center;
color: #c5c1c1;
letter-spacing: 3px;
}
#in-nav{
font-family: "montserrat-regular", sans-serif;
font-weight: 500;
}
#both{
margin-left: 1.9rem;
}
.list h6{
font-family: "montserrat-regular", sans-serif;
}
.ul li {
list-style: none;
padding-bottom: .6rem;
}
.ul li a {
color: #2c2c2c;
text-decoration: none;
font-size: 2rem;
font-family: "montserrat-regular", sans-serif;
text-decoration: none;
letter-spacing: -.7px;
cursor: pointer;
}
#c:hover {
color: #1d1d1d;
letter-spacing: 5px;
}
.social-intro h2, .contact-intro h2{
font-family: cursive;
}
#social-links{
margin-bottom: 10rem;
}
.social-links i{
margin-right: 1rem;
}
.social-links i:hover{
cursor: pointer;
}
.em{
margin-left: -12rem;
}
#contact{
margin-bottom: 7rem;
}
.copyright{
font-family: "montserrat-regular", sans-serif;
}
#ctc h6{
font-family: "montserrat-semibold", sans-serif;
}
#ctc a{
text-decoration: none;
}
#ctc h3{
color: #fff;
}
#ctc h3:hover{
color: #ee9c3e;
transition: 0.3s ease-in-out;
}
