I've read all the similar posts about this but none has worked for me so.
Im trying to make a responsive navigation bar with some YouTube tutorials, I have a checkbox to hide an show the menu when the width is to small. I've seen the console looking for bugs but there are no bugs, I've change the browser from chrome, to edge and to firefox but it doesn't seems to be the browser either. Also I changed the tags order in my HTML in order to accomplish the sibling general something rule but nothing has worked and Im kind of stuck whit this.
Here is my HTML code below:
<header>
<nav>
<img class="logo" src="/responsive1/logo.svg" alt="logo">
<input type="checkbox" class="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
And here is the CSS code which I want to use to hide and show the menu:
@media (max-width: 858px) {
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
.check:checked~ul{
left: 0;
}
}
A relevant detail here is that when I add the ~ character and then I click the <input type="checkbox" ... in the browser inspector the @media it's not recognized but when I delete this character It is recognized.
This is the tutorial I'm following, the exact part where he does it is in min 6:30: https://www.youtube.com/watch?v=oLgtucwjVII
Here is all the CSS code if it helps:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
* {
padding: 0px;
margin: 0px;
text-decoration: none;
list-style: none;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body header {
background-color: #0082e6;
height: 80px;
width: 100%;
}
.logo {
width: 150px;
line-height: 80px;
margin: 15px 100px;
cursor: pointer;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a .active,
a:hover {
background-color: #1b9bff;
transition: .5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
.check {
display: none;
}
@media (max-width: 952px) {
.logo {
width: 100px;
margin: 25px 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background-color: none;
color: #0082e6;
}
.check[type=checkbox]:checked~ul {
left: 0;
}
}