0

My HTML code looks like this:

<nav>
        <ul class="nav-links">
            <li class="hvr-shutter-out-horizontal"><a href="#">Login</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">About Us</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">Donate</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">Feedback</a></li>
            <li class="hvr-shutter-out-horizontal"><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle">

and the css file is

.nav-links {
    text-align: center;
    font-size: 15px;
    width: 100%;
    display: none;  
}

#toggle:checked + .nav-links{
    display: block;
}

But the checked property here is not working. Please help .

Sanket
  • 75
  • 1
  • 9

3 Answers3

0

+ is the next-sibling combinator.

.nav-links is not next after the input, it is the child of the nav that is two siblings before it.

There is no combinator which targets a previous element.

Toggle menus are best achieved with JavaScript which can toggle a class on the element and add suitable aria states to the DOM.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

Your + selector is not correct. Please check this https://www.w3schools.com/cssref/sel_element_pluss.asp As your css selector, .nav-links have to be placed immediately after #toggle

Chuong Tran
  • 350
  • 1
  • 3
0

.nav-links is not in the same sibling as #toggle, but nav is. You can either do #toggle:checked or #toggle:checked + nav.

Chloe Dev
  • 271
  • 1
  • 8
  • I tried doing `#toggle:checked + nav` but id doesnt work . The whole code is inside a header tag. Then what should i do to make it work – Sanket Jul 21 '20 at 05:53