css&html nav bar should appear when checkbox is checked

Question

I've tried using the two sibling selectors ( ~ , as in snippet, and + ) to make the nav bar appear when the box is checked, but it doesn't work, nor do I know what else to do.

 nav { left: -100%; position: fixed; } #check:checked~nav { left: 0; }

 <input type="checkbox" id="check"><label for="check"><i class="fas fa-bars"></i></label></div> <nav> <ul> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> </ul> </nav>

Answer 1

Here is what you code should look like, first you have a none closed <div> tag and for + sibling select move the label for the above the checkbox.

 nav{ left: -100%; position: fixed; } #check:checked + nav{ left: 0px; }

 <label for="check"><i class="fas fa-bars"></i></label> <input type="checkbox" id="check"> <nav> <ul><li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> </ul> </nav>

and if you want to have the same order for the tag change the CSS selector to this:

 nav{ left: -100%; position: fixed; } #check:checked + label + nav{ left: 0px; }

 <input type="checkbox" id="check"> <label for="check"><i class="fas fa-bars"></i></label> <nav> <ul> <li><a href="">Test</a></li> <li><a href="">Test</a></li> <li><a href="">Test</a></li> </ul> </nav>