Adjacent selector not working

Question

I am trying to make a sliding sidebar without javascript, but I have a problem with a neighboring selector that does not work.

This is my code:

.sidebar {
  position: fixed;
  top: 100px;
  right: 0px;
  z-index: 0;
  width: 120px;
  height: 100px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.00);
  border-bottom: solid 1px #181918;
  border-left: solid 1px #181918;
}
.sidebar ul li {
  font-family: 'Zona Pro';
  font-size: 18px;
  margin-bottom: 16px;
  -webkit-font-smoothing: antialiased;
  color: rgba(24, 25, 24, 0.78);
  cursor: pointer;
}
#sidebarToggler {
  display: none;
}
#sidebartoggler + .sidebar {
  top: 500px;
}

<div class="pageWrap">
  <input type="checkbox" id="sidebarToggler" />
  <div class="sidebar">
    <ul>
      <li>Settings</li>
      <li>Log out</li>
    </ul>
  </div>
  <div class="userNameDiv">
    <label for="sidebarToggler">
      Fale1994
    </label>
  </div>
  <div class="pageContent">
    @RenderBody()
  </div>
</div>

Run codeHide result

Everything works fine except for the last line of CSS ... I tried everything and have no more ideas.

When clicked label, the parameter checkboxchanges the checkbox / checkbox, and then CSS should set the “top” sidebar attribute to 500px, if it is set. I also tried this with help background-color, but it also does not work.

Answer 1

2 things you are missing:

• :checked from ckeckbox
• and you have it #sidebartoggler, but CSS is case sensitive, so use#sidebartoggler

Excerpt

.sidebar {
  position: fixed;
  top: 100px;
  right: 0px;
  z-index: 0;
  width: 120px;
  height: 100px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.00);
  border-bottom: solid 1px #181918;
  border-left: solid 1px #181918;
}
.sidebar ul li {
  font-family: 'Zona Pro';
  font-size: 18px;
  margin-bottom: 16px;
  -webkit-font-smoothing: antialiased;
  color: rgba(24, 25, 24, 0.78);
  cursor: pointer;
}
#sidebarToggler {
  display: none;
}
#sidebarToggler:checked + .sidebar {
  top: 500px;
}

<div class="pageWrap">
  <input type="checkbox" id="sidebarToggler" />
  <div class="sidebar">
    <ul>
      <li>Settings</li>
      <li>Log out</li>
    </ul>
  </div>
  <div class="userNameDiv">
    <label for="sidebarToggler">
      Fale1994
    </label>
  </div>
  <div class="pageContent">
    @RenderBody()
  </div>
</div>

Run codeHide result

Answer 2

#sidebartoggler:checked + .sidebar

You forgot :checked.