After making the modifications specified in the comments labeled 'modify' for this codepen, the result is that the hamburger icon moves to the right and slides from the right as intended.
However, I would like the menu content to also slide out from the right. What am I overlooking?
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
right: 15px; top: 15px; /* changed from left: 15px to right: 15px*/
z-index: 2;
/* non-critical appearance styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
CSS Transition effect:
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: right 0.2s; /* changed from left to right keyword */
}
.nav-trigger:checked + label {
right: 215px; /* changed from left to right: 215px */
}
.nav-trigger:checked ~ .site-wrap {
right: 200px; /* changed from left to right: 200px */
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
EDIT: "that happens is the hamburger icon moves to the right and slides from the right" - By this I meant the hamburger icon is positioned on the right-hand side and when clicked, it slides in a leftward direction from the right.