This is the HTML structure
<div class="nav-bar">
<input type="checkbox" id="toggle"/>
</div>
<div class="menu">
<a href="#" class="menu-item">Home</a>
<a href="#" class="menu-item">About US</a>
<a href="#" class="menu-item">Services</a>
<a href="#" class="menu-item">Contact</a>
<a href="#" class="menu-item"><span>NEW</span></a>
</div>
How do I hide the the menu
div when #toggle is checked? I'm looking for a way to do this in css itself.
This is what I tried so far. But it doesn't work because the +
is a adjacent sibling selector. It will work if I move the checkbox out from the nav-bar
div. Is there a way to achieve this while keeping the same HTML structure?
#toggle{
&:checked + .menu{
//do stuff;
}
}