I am trying to get my menu to display when my toggle checkbox is selected however, it will not. I understand why in that my .menu-container is not a sibling of my toggle element however, I do not know how to get it to work without taking my toggle out of the div so my .menu-container directly proceeds. I am still learning Javascript (I am junior) so understand this could be done with that but CSS is the way forwards for me at the moment unless you have a simple explanation/solution with js.
I hope that makes sense.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.nav-container {
position: fixed;
top: 0;
width: 100vw;
/*border: 1px solid red;*/
}
.toggle-container {
display: flex;
justify-content: flex-end;
/*border: 1px solid blue;*/
/*margin: 20px;*/
}
.menu-container {
display: flex;
justify-content: flex-end;
margin: 20px 30px 20px 20px;
}
.menu-item {
padding: 0 10px;
font-size: 1.1em;
}
#toggle {
display: none;
}
.toggle {
display: none;
font-size: 1.8em;
padding: 15px 30px 10px 0;
}
/*.menu-container {
display: flex;
flex-direction: column;
border: 1px solid green;
align-items: center;
}
*/
@media only screen and (max-width: 500px) {
.toggle {
display: block;
}
.menu-container {
flex-direction: column;
margin: 0;
border-top: 1px solid gray;
display: none;
}
.menu-item {
padding: 8px;
width: 100vw;
text-align: center;
border-bottom: 1px solid gray;
}
#toggle:checked+.menu-container {
display: block;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Bundles</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Comptible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="mynavtext.css">
<link rel="stylesheet" href="..\fontawesome-free-5.12.1-web\css\all.css">
</head>
<body>
<nav class="nav-container">
<div class="toggle-container">
<label class="toggle" for="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="toggle">
</div>
<div class="menu-container">
<a class="menu-item" href="#">Categories</a>
<a class="menu-item" href="#">How It Works</a>
<a class="menu-item" href="#">Log In</a>
<a class="menu-item" href="#">Register</a>
</div>
</nav>
</body>
</html>
Thank you,