Trying to create a sliding sidebar without using JavaScript has presented me with a challenge involving an adjacent sibling selector that just won't function as expected.
Here is the code snippet causing the issue:
.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>The CSS seems to be working flawlessly except for one last line... I've tried multiple approaches but can't seem to make it work.
Upon clicking on the label, the status of the checkbox toggles between checked and unchecked. The aim is for the CSS to then adjust the 'top' attribute of the sidebar to 500px when checked. I even experimented with changing the background-color, all to no avail.