Why can I click the li when the navbar isn't showed? - html

Question

Ok so I have a problem with my navbar on mobile. It is hidden and it displays only when I press the bar (toggler). The problem is: if I press on the screen when the navbar isn't displayed it still goes to the links, even if I can't see the li's.
I want to keep the same navbar but I don't want to acces the links when it is closed.
If its possible please tell me how to solve it and the problems of my navbar
This is my code:
.banner {
margin: 0px;
position: relative;
width: 100%;
height: 100vh;
background-size: cover;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)), url(../img/pozabackground-home2.jpg);
background-position: center;
box-shadow: 1px 2px 4px 0px #00000075 !important;
background-attachment: fixed;
}
.navigatie {
background-color: transparent;
width: 100%;
position: fixed;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
letter-spacing: 1.1px;
font-weight: 600;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #104f47 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color: #104f47;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked+.nav-btn {
transform: rotate(45deg);
background-color: #104f47;
}
#nav:checked+.nav-btn i {
background: #fff;
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-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked~.nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN PTR TLF */
#media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
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: right;
padding-top: 10px;
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:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 48px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
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;
}
}
/* SCRIS DE LA BANNER */
.title {
position: absolute;
top: 47%;
left: 35%;
text-align: left;
transform: translate(-50%, -50%);
}
.title h1 {
color: #fff;
font-family: poppins;
font-size: 50px;
color: #f5f6f8;
padding-bottom: 20px;
}
.button button {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
text-align: center;
padding: 13px 20px;
border: none;
color: white;
font-family: montserrat;
text-decoration: none;
transition: 0.6s ease;
background-color: #104f47;
box-shadow: 1px 2px 4px 0px #00000075;
outline: none;
}
.button button:hover {
background-color: #104f47;
color: white;
}
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a class="navbar-brand" href="index.php"><img src="./img/logoinainte.png"></a>
</div>
<div class="nav-wrapper">
<ul>
<li>Acasa</li>
<li>Despre</li>
<li>Servicii</li>
<li>Tarife</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<section class="banner">
<div class="container">
<div class="title">
<h1>Aspect curat <br>și îmbunătățit al <br>locuinței tale</h1>
<div class="button">
<button type="button">Sună acum!</button>
</div>
</div>
</div>
</section>
Could you tell me what is the problem?

Answer 1

You are using opacity. With opacity the element becomes invisible but it is still there. You have to set its display to none. And when the button is clicked you have to set its display to block.
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}