Off-screen navigation - right and left - css only - html

Question

I'm trying to create a right and left off-screen navigation drawer with only css and I'm having problems getting each side to work properly.
I'm using checkboxes as my buttons like this:
<input type="checkbox" id="toggle-right">
<input type="checkbox" id="toggle-left">
If I have the toggle-right place on top then the right drawer opens, but not the left.
If I reverse the order like this:
<input type="checkbox" id="toggle-left">
<input type="checkbox" id="toggle-right">
Toggle left will work, but not toggle right.
I made a JSFiddle to show you what I mean.
If someone has time to take a look and help me figure this out I would appreciate it.
While reviewing the JSFiddle, reverse the order of the checkbox toggles to see what I'm talking about.

Answer 1

The problem lies with the usage of + - adjacent sibling selector. As it works only for next element to your checkbox, it will only works for one of them. The solution is to use ~ - general sibling selector.
header {
width: 100%;
height: 90px;
background-color:#f1f1f1;}
.menu-toggle {
text-decoration: none;
text-align: center;
width: 44px;
height: 44px;
font-size: 30px;
color: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.15s ease-out 0s;
-moz-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
position: absolute;
top: 0px;
right: auto;
bottom: 0;
left: 20px;
z-index: 2; }
.menu-toggle:hover {
color: #000000; }
#toggle-left {
display: none; }
#toggle-left:checked ~ .page-wrap nav.menu {
left: 0px; }
#toggle-left:checked ~ .page-wrap .menu-toggle {
left: 220px; }
.profile-toggle {
text-decoration: none;
text-align: center;
width: 44px;
height: 44px;
font-size: 30px;
color: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.15s ease-out 0s;
-moz-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
position: absolute;
top: 0px;
right: 40px;
bottom: 0;
left: auto;
z-index: 2; }
.profile-toggle:hover {
color: #000000; }
#toggle-right {
display: none; }
#toggle-right:checked + .page-wrap nav.profile {
right: 0px; }
#toggle-right:checked + .page-wrap .profile-toggle {
right: 220px; }
nav.menu {
position: fixed;
top: 0px;
right: auto;
bottom: 0px;
left: -270px;
-webkit-transition: all 0.15s ease-out 0s;
-moz-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
height: auto;
width: 200px;
background: #111111;
z-index: 2000; }
nav.profile {
position: fixed;
top: 0px;
right: -270px;
bottom: 0px;
left: auto;
-webkit-transition: all 0.15s ease-out 0s;
-moz-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
height: auto;
width: 200px;
background: #990000;
z-index: 2000; }
<input type="checkbox" id="toggle-left">
<input type="checkbox" id="toggle-right">
<div class="page-wrap">
<header>
<div class="top-bar">
<label for="toggle-left" class="menu-toggle">☰</label>
<label for="toggle-right" class="profile-toggle"><b>+</b></label>
</div>
<div class="middle-line"></div>
<div class="bottom-bar"></div>
</header>
<nav class="menu">
</nav>
<nav class="profile">
</nav>