Css&html Nav Bar Should Appear When Checkbox Is Checked

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.

Solution 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>