0

I am having a problem with CSS checkbox dropdowns. Please check the code.

input[name="navbar-toggler"],
.navbar-menu,
input[name="dropdown"],
.products {
  display: none;
}

input[name="navbar-toggler"]:checked~.navbar-menu {
  display: block;
}

input[name="dropdown"]:checked~.products {
  display: block;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container px-4 px-lg-5">
    <a class="navbar-brand" href="#">Brand</a>
    <input id="check1" type="checkbox" name="navbar-toggler" />
    <label for="check1" class="navbar-toggler"><span class="navbar-toggler-icon"></label>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">

        <li class="nav-item"><a class="nav-link" aria-current="page" href="/">Home</a></li>
        <li class="nav-item">
          <input id="check2" type="checkbox" name="dropdown" />
          <label for="check2" class="nav-link">Products</label>
          <ul class="products">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="navbar-menu mb-4">
  <div class="container">
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
  </div>
</div>

I have no idea why navbar toggler do not work when check1 is checked. check2 works fine. Both codes are identical. Please check the code and tell me what I did wrong.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
NewRecord
  • 1
  • Your selector - `input[name="navbar-toggler"]:checked~.navbar-menu { display: block; }` - is wrong; the `.navbar-menu` is not a sibling of the ``. Look at the functional [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) pseudo-class; though do be aware that there are compatibility issues (at the time of writing) – David Thomas Jun 04 '23 at 10:00

1 Answers1

0

You have an unclosed <span> on the line where your label for check1 is. Close it before the closing label tag and see if it works as expected.

Anthony Bertrand
  • 96
  • 8