html css dom deployment web-deployment-project

Cannot acess nav to make changes after checked checkbox in css

I tried to change the nav element left property to zero when I checked the check box using CSS.

#check:checked ~ header nav{
    left:0;
}

But any changes don't happen when I click the checkbox. Is it because the nav and checkbox are not siblings? Then how to recorrect it?

Here is the HTML code.

  <body>
    <div class="headernnav">
        <header>
            <div class="headertitle">EVERGREEN GRASS SUPPLIERS</div>
            <input type="checkbox" id="check"></input>
            <label for="check" class="checkbtn">
            <i class="fas fa-bars"></i>
        </label>
        </header>
        
        <nav>
            <div class="firstitem"><a href="home.html" class="anav active">HOME</a></div>
            <div class="item"><a href="aboutus.html" class="anav">ABOUT US</a></div>
            <div class="item"><a href="gallery.html" class="anav">GALLERY</a></div>
            <div class="item"><a href="shop.html" class="anav">SHOP</a></div>
            <div class="lastitem"><a href="contactus.html" class="anav">CONTACT US</a></div>
        </nav>
    </div>

</body>

Please Can anyone offer some assistance to solve this problem? Thank you!

Solution

You can modify HTML so that the checkbox become a sibling which immediately precedes nav.

#check:checked + nav {}

<header>...</header>
<input type="checkbox" id="check">
<nav>...</nav>

Try it:

#check:checked + nav {
  padding-left: 50px; /* For demonstration purposes */
}

<body>
  <div class="headernnav">
    <header>
      <div class="headertitle">EVERGREEN GRASS SUPPLIERS</div>
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
    </header>
    <input type="checkbox" id="check">

    <nav>
      <div class="firstitem"><a href="home.html" class="anav active">HOME</a></div>
      <div class="item"><a href="aboutus.html" class="anav">ABOUT US</a></div>
      <div class="item"><a href="gallery.html" class="anav">GALLERY</a></div>
      <div class="item"><a href="shop.html" class="anav">SHOP</a></div>
      <div class="lastitem"><a href="contactus.html" class="anav">CONTACT US</a></div>
    </nav>
  </div>
</body>

Modern CSS has another solution to this (check browser compatibility before using it):

header:has(#check:checked) + nav {}

Try it:

header:has(#check:checked) + nav {
  padding-left: 50px; /* For demonstration purposes */
}

<body>
  <div class="headernnav">
    <header>
      <div class="headertitle">EVERGREEN GRASS SUPPLIERS</div>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
    </header>

    <nav>
      <div class="firstitem"><a href="home.html" class="anav active">HOME</a></div>
      <div class="item"><a href="aboutus.html" class="anav">ABOUT US</a></div>
      <div class="item"><a href="gallery.html" class="anav">GALLERY</a></div>
      <div class="item"><a href="shop.html" class="anav">SHOP</a></div>
      <div class="lastitem"><a href="contactus.html" class="anav">CONTACT US</a></div>
    </nav>
  </div>
</body>