how to use :checked for responsive navbar using css

Question

I have added a checkbox with the class checkButton.

      <div class="hamburger">
        <input type="checkbox" id="check"/>
        <label for="check" class="checkButton">
          <i class="fas fa-bars" style="font-size: 35px"></i>
        </label>
      </div>
    </div>
    <div>
      <ul class="navItems">
        <li><a href="#home" class="navItem active">HOME</a></li>
        <li><a href="#services" class="navItem">SERVICES</a></li>
        <li><a href="#projects" class="navItem">PROJECTS</a></li>
        <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
        <li><a href="#contact" class="navItem">CONTACT</a></li>
      </ul>
    </div>

Then I added some CSS for how it should look when clicked.

    ul{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        z-index: 0;
        right: 100%;
        background-color: #e54136;
        transition: all .5s;
    }

Can you please tell me how to use :clicked and link it so that my ul changes on clicking the checkButton class. Here's what I did and it's not working.

    ul{
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        z-index: 0;
        right: 100%;
        background-color: #e54136;
        transition: all .5s;
    }

When it is checked, it must bring right: 0; in ul .

.checkButton:checked ~ ul{
    right: 0%;
}

Answer 1

The General Sibling Combinator references a sibling of the element on the left.

Your ul is not a sibling of your input . It is a child of a sibling of the input's grandparent (or first cousin, once removed ).

There is no way to select the ul from the input so to get this to work, you'd need to rearrange your markup.

… but don't. CSS alone is not a good tool for this problem. Use JavaScript. Take advantage of accessibility tools like ARIA .

Answer 2

This should work

 var check = document.querySelector('.hamburger >.checkButton'); var menu = document.querySelector('.navItems'); check.addEventListener('click', function(e) { e.preventDefault(); menu.classList.toggle('show'); });

 ul { position: fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 0; right: 100%; background-color: #e54136; transition: all.5s; } ul.show { right: 0; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" /> <div class="hamburger"> <button class="checkButton"> <i class="fas fa-bars"></i> </button> </div> <ul class="navItems"> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> </ul>

Answer 3

Here is a very simple example of how it should work without JS:

 label { cursor:pointer; } input + nav { visibility:hidden; } input:checked + nav { visibility:visible; }

 <label for="a1">Hamburger button, click me</label> <input type="checkbox" id="a1"> <nav>Hidden menu</nav>

Answer 4

ul ~ p Selects every element that are preceded by a

element. For better understanding read https://www.w3schools.com/cssref/css_selectors.asp

but if u dont want to use js of jQuery

here is the code with checkbox

 ul.navItems{ position: fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 0; right: 100%; background-color: #e54136; transition: all.5s; }.hamburger input:checked + ul.navItems { right: 0%; }

 <div> <div class="hamburger"> <input type="checkbox" id="check"/> <ul class="navItems"> <li><a href="#home" class="navItem active">HOME</a></li> <li><a href="#services" class="navItem">SERVICES</a></li> <li><a href="#projects" class="navItem">PROJECTS</a></li> <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li> <li><a href="#contact" class="navItem">CONTACT</a></li> </ul> </div> </div>