So I'm trying to create a responsive page,with responsive menu,but for some reason,in the CSS my code isn't working with the checkbox:checked command. At the 160th line. With 600px max width
This code:
#click:checked ~ .Header ul{
top: 80px;
left: 0;
}
So when the someone click on that checkbox,I want the ul list to go down with smooth animation,but this doesn't work,and I have no idea why. Here is the full code of the website:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
animation: fadein 1s ease;
-moz-animation: fadein 2s ease; /* Firefox */
-webkit-animation: fadein 2s ease; /* Safari and Chrome */
-o-animation: fadein 2s ease; /* Opera */
background-color: rgb(255,255,255);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
height: 100%;
padding: 0;
margin: 0;
}
::-webkit-scrollbar {
width: 12px;
background-color: #383838;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: hsla(0,0%,100%,.56);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
border-radius: 10px;
background-color: #383838;
}
.Header {
transition: transform .3s;
z-index: 99;
position: relative;
width: 100%;
height: 80px;
padding: 20px 0;
font-size: 1rem;
background: rgba(32,32,38,1);
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
}
.Header ul li {
color: #b9b9b9;
font-size: 20px;
margin-top: 10px;
margin-left: 35px;
list-style: none;
margin-right: 35px;
cursor:pointer;
}
.Header ul a {
display:contents;
text-decoration: none;
}
.Header ul li:hover {
color: #ffff;
}
.Header ul {
display: inline-flex;
margin-left: 250px;
}
.Header.scrolled {
position:fixed;
transition-property: position;
transition-duration: 5s;
transition-delay: 2s
}
.Header .navicons input {
float: right;
display: none;
}
.navicons .menu-btn i {
color: #b9b9b9;
float: right;
margin-top: 5px;
font-size: 28px;
margin-right: 35px;
cursor: pointer;
display:none
}
.fa-search {
color: #b9b9b9;
float: right;
margin-top: 5px;
font-size: 28px;
margin-right: 35px;
cursor: pointer;
}
.fa-sign-in-alt{
color: #b9b9b9;
float: right;
margin-top: 5px;
font-size: 28px;
margin-right: 35px;
cursor: pointer;
}
.fa-search:hover {
color: #ffffff;
}
.fa-user-circle {
color: #b9b9b9;
float: right;
margin-top: 5px;
font-size: 28px;
margin-right: 35px;
cursor: pointer;
}
.fa-user-circle:hover {
color: #ffffff;
}
@media screen and (max-width: 900px) {
.previewContainer.small {width: 26%;}
.Header ul {
margin-left: 0.1%;
}
}
@media screen and (max-width: 765px) {
.previewContainer.small {width: 26%;}
}
@media screen and (max-width: 600px) {
.Header {
display:block;
}
.navicons .menu-btn i {
display:block;
}
.navicons a i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
.Header ul {
position: fixed;
top: 80px;
top: -100%;
background: rgba(32,32,38,1);
height: 100vh;
width: 100%;
left: 0;
text-align: center;
display: block;
transition: all 0.3s ease;
padding: 0;
z-index: -1;
}
#click:checked ~ .Header ul{
top: 80px;
left: 0;
}
nav ul li{
width: 100%;
margin: 40px 0;
}
nav ul li a{
width: 100%;
margin-right: -100%;
display: block;
font-size: 20px;
}
#click:checked ~ ul li a{
margin-left: 0px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style-home.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="Header">
<ul>
<a href="link1"><li>Link1</li></a>
<a href="link2"><li>Link2</li></a>
<a href="link3"><li>Link3</li></a>
</ul>
<div class="navicons">
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars" aria-hidden="true"></i>
</label>
<a href="profile.php"><i class="fas fa-user-circle" title="Login" aria-hidden="true"></i><span class="sr-only"></span></a><span class="sr-only"></span>
<a href="search.php"><i class="fas fa-search" title="Search" aria-hidden="true"></i><span class="sr-only"></span></a><span class="sr-only"></span>
</div>
</nav>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire