1

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;
  }
}
Fergoso
  • 1,556
  • 3
  • 17
  • 37
  • 3
    No, it is not possible with that HTML structure. – 04FS Feb 13 '19 at 10:06
  • Your checkbox and your menu need to both be children of the same parent, i.e. your menu should immediately follow the checkbox element see: https://jsfiddle.net/76sv03w1/ – shanomurphy Feb 13 '19 at 11:19

0 Answers0