I need help with my nav bar in mobile mode. My LIs don’t want to respond to display: block;
Here are some screenshots :
here’s the HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JaâvaScript by Jaâfar Alioui</title>
<link rel="icon" href="/img/image (1).ico" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<nav>
<div class="logo">
<h3>JaâvaScript</h3>
</div>
<input type="checkbox" id="chk" />
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</nav>
<section class="hero-section">
<header>
<h2>Welcome to my first website</h2>
<h4>Your first steps into web developpement</h4>
</header>
<button class="first">Get started</button>
</section>
<section class="form-section">
<header>
<h2>Contact us</h2>
</header>
<form class="form" action="/submitted.html">
<input placeholder="Username" type="text" name="user" id="user-input" />
<input placeholder="Email" type="email" name="email" />
<textarea
maxlength="300"
placeholder="Your Message Here (max: 300)"
name="message"
id="message"
cols="30"
rows="10"
></textarea>
<button class="second">Submit</button>
</form>
<footer class="foot">
Jaâfar Alioui © 2019
<div class="navigation">
<a
target="_blank"
href="https://www.facebook.com/profile.php?id=100009412130150"
>
<img
width="40"
height="40"
src="/img/20e5f939f6bb4aff13b39bcb2a5b8b21.png"
alt="Add me on facebook!"
/></a>
<a
target="_balk"
href="https://www.youtube.com/channel/UC9HSRIOo-fA7IhbQrbw25FQ?"
>
<img
width="40"
height="40"
src="/img/téléchargement.png"
alt="Subscire to my channel!"
/></a>
<a target="_balk" href="https://www.instagram.com/jaafaralioui/">
<img
width="40"
height="40"
src="/img/instagram-round-flat-512.png"
alt="Follow me!"
/>
</a>
</div>
</footer>
</section>
</body>
</html>
and here’s the CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.first {
border: 2px solid white;
background: transparent;
color: white;
margin: 30px;
font-family: "Poppins", sans-serif;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
text-shadow: 0px 2px 3px rgb(0, 0, 0);
border-radius: 25px;
transition: all 0.5s ease 0s;
}
.first:hover {
background-color: rgba(0, 128, 128, 0.6);
}
.second {
font-size: 1.4rem;
background-color: rgba(0, 128, 128, 0.8);
color: white;
text-shadow: 0px 2px 3px rgb(0, 0, 0);
font-family: "Poppins", sans-serif;
border: 1.5px solid white;
border-radius: 30px;
padding: 0.5rem 2rem;
margin-top: 2rem;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.second:hover {
background-color: rgba(255, 128, 82, 0.8);
}
h2 {
font-size: 3.6rem;
padding: 2.5rem 0rem;
}
h4 {
font-size: 2rem;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-size: 25px;
font-family: "Poppins", sans-serif;
background-color: teal;
}
.logo {
color: white;
text-shadow: 3px 2px 1px coral;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 35px;
}
.nav-links {
display: inline-flex;
justify-content: space-around;
width: 45%;
line-height: 100px;
}
.nav-links a {
color: white;
text-shadow: 2px 1px 2px black;
text-decoration: none;
padding: 0 10px;
letter-spacing: 2px;
font-weight: bold;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
transition: all 0.3s ease 0s;
}
.nav-links li a.active, a:hover {
color: coral;
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 40px;
cursor: pointer;
display: none;
color: white;
text-shadow: 3px 2px 1px coral;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.show-menu-btn:hover,
.hide-menu-btn:hover{
color: coral;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
.hero-section {
background-image: url("/img/grayscale-photo-of-computer-laptop-near-white-notebook-and-169573.jpg");
height: 30rem;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
color: white;
text-shadow: 5px 3px 3px black;
}
.form-section {
background-image: url("/img/man-using-laptop-on-table-against-white-background-257897.jpg");
text-align: center;
background-size: cover;
background-position: center;
height: 45rem;
}
.form-section h2 {
color: white;
text-shadow: 0px 2px 3px teal;
transition: all 0.3s ease 0s;
}
.form-section h2:hover {
color: rgb(141, 141, 141);
}
form input,
form label,
form textarea {
display: block;
}
form input {
margin: auto;
}
form textarea {
margin: auto;
}
.foot {
position: fixed;
bottom: 0px;
right: 0px;
color: black;
}
@media screen and (max-width: 952px){
.logo{
font-size: 30px;
padding-left: 20px;
}
nav ul li a{
font-size: 20px;
}
@media screen and (max-width: 768px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.nav-links{
position: fixed;
width: 90%;
height: 100vh;
background: rgb(1, 110, 110);
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.nav-links a{
display: block;
padding: 20px;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .nav-links{
right: 0;
}
}
Thank you in advance