Develop Reference

How to get text to animate to look as if it is going under another layer

For a comparable example, view this site. If you look on the left side, you will see rotated text that loops through different lines of text. This is what I am trying to accomplish. The text in this example starts by the white line and then once it starts moving up, it looks as if it goes under a layer to make it seem like it is going out of place.
How could I modify my code to handle this?
Right now the white line and the text do not appear in line and I cannot figure out how I can make it look like the text is moving under another layer.
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;
var loop = function() {
arr.removeClass('curr');
arr.removeClass('next');
$('span[data-index = ' + i + ']').addClass('curr');
$('span[data-index = ' + next_i + ']').addClass('next');
i = (i + 1) % arrLen;
next_i = (next_i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
#container {
background: blue;
width: 100%;
height: 100vh;
}
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #fff;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
overflow: hidden;
}
.digitalAgency,
.agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.agencyText {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
color: #FFF;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr {
visibility: visible;
-webkit-animation-name: dgAgnCurr;
animation-name: dgAgnCurr
}
.digitalAgency .agencyText.next {
visibility: hidden;
-webkit-animation-name: dgAgnNext;
animation-name: dgAgnNext
}
#-webkit-keyframes dgAgnCurr {
from {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
#keyframes dgAgnCurr {
from {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
}
#-webkit-keyframes dgAgnNext {
from {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
#keyframes dgAgnNext {
from {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">Text for A</span>
<span data-index="1" class="agencyText">Text for B</span>
<span data-index="2" class="agencyText">Text for C</span>
<span data-index="3" class="agencyText">Text for D</span>
</span>
</div>
</div>

Get rid of the CSS animations and use a simple transition. No need to overcomplicate things. You're simply going from translate -100% to 0% to 100% so you don't really need animation keyframes.
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var next_i = 1;
var loop = function() {
arr.removeClass('curr');
arr.removeClass('next');
$('span[data-index = ' + i + ']').addClass('curr');
$('span[data-index = ' + next_i + ']').addClass('next');
i = (i + 1) % arrLen;
next_i = (next_i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
#container {
background: blue;
width: 100%;
height: 100vh;
}
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #fff;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
overflow: hidden;
}
.digitalAgency,
.agencyText {
transition:.45s ease-in-out; /* added this */
}
.agencyText {
font-family: 'Raleway', sans-serif;
font-size: 1.1rem;
color: #FFF;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
transform: translateY(-100%); /* added this */
}
.digitalAgency .agencyText.curr {
visibility: visible;
transform: translateY(0%); /* added this */
}
.digitalAgency .agencyText.next {
visibility: hidden;
transform: translateY(100%); /* added this */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">Text for A</span>
<span data-index="1" class="agencyText">Text for B</span>
<span data-index="2" class="agencyText">Text for C</span>
<span data-index="3" class="agencyText">Text for D</span>
</span>
</div>
</div>

Smooth scrolling not working when it should?

So I've been designing a website for my new market garden company. The eCommerce backend is Lemonstand. I simply want to have the arrow button at the bottom of the main image scroll to the anchor (rather than jump). You can view the website here.
I found this code on this website in response to another question:
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#scroll").click(function() {
scrollToAnchor('start');
});
The HTML is:
<div id="home-image-scrollbtn" class="mt-auto"><a id="scroll" href="#start">
<i class="fas fa-arrow-circle-down"></i></a></div>
<section class="container"><a name="start"></a>
I'm loading jquery 3.3.1 from Google's CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've also tried numerous js scripts. All of them work in theory but don't seem to work on my site. What am I missing?

A small Demo , might help.
// Back to top
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$(".bck-top").addClass("show");
} else {
$(".bck-top").removeClass("show");
}
});
$(".bck-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, 800);
return false;
});
// Smooth Scroll
$(".nxt-pg").click(function(event){
$("html, body").animate({
scrollTop: $( this ).offset().top
}, 800);
event.preventDefault();
});
.for-height {
background: crimson;
height: 150vh;
}
.bck-top {
position: fixed;
right: -75px;
bottom: 35px;
background: #0e4d67;
width: 50px;
height: 50px;
border-radius: 50%;
opacity: 0;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
transition: all .6s cubic-bezier(0.56, 0.07, 0.35, 1.99);
cursor: pointer;
z-index: 555;
}
.bck-top.show {
right: 35px;
border-radius: 0 50% 50% 50%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #797bed;
opacity: 1;
transition-property: right, transform, border-radius;
transition-duration: .6s, .6s, .5s;
transition-timing-function: cubic-bezier(0.56, 0.07, 0.35, 1.99);
transition-delay: 0s, 0s, .5s;
box-shadow: 2px 2px 6px 0px #303030;
}
.bck-top.show:hover {
border-radius: 50%;
transition: all .4s cubic-bezier(0, 2.84, 0, 1.19);
}
.nxt-pg {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
width: 40px;
height: 29px;
margin: 0 auto;
cursor: pointer;
}
.nxt-pg span,.nxt-pg span:before, .nxt-pg span:after {
display: block;
width: 40px;
height: 4px;
border-radius: 35px;
background: #fff;
animation: fadeBottom .8s cubic-bezier(0.56, 0.07, 0.35, 1.99) alternate infinite;
}
.nxt-pg:active span,.nxt-pg:active span:before, .nxt-pg:active span:after {
animation-play-state: paused;
}
.nxt-pg span {
position: relative;
margin: 0 auto;
}
.nxt-pg span:before, .nxt-pg span:after {
content: '';
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
.nxt-pg span:before {
top: 12px;
width: 30px;
animation-delay: .15s;
}
.nxt-pg span:after {
top: 24px;
width: 20px;
animation-delay: .2s;
}
#-webkit-keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #009688;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #787bed;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="for-height">
<a class="nxt-pg">
<span class="br-top"></span>
Click Me
</a>
</div>
<button type="button" class="bck-top">up</button>

How do I automatically have Javascript-animations (with CSS) open in a certain order?

I'm trying to create an animated envelope on my site.
Right now, the code I'm trying to use only starts the next step of the animation on click.
My question would be how I get the animations to occur automatically after a certain amount of time.
This is how the code looks right now:
Javascript:
<script type="text/javascript">
// Wait for page to load
window.onload=function(){
$(document).ready(function () {
// Hide the div
$("#card").hide();
// Show the div after 5s
$("#card").delay(5000).fadeIn(100);
});
// Add Flip Envelope Event Handler
document.getElementById('envelope_front').onclick = function(){
document.getElementById('envelope_front').classList.toggle('flipped');
document.getElementById('envelope_back').classList.toggle('flipped');
}
// Add Open Envelope Event Handler
document.getElementById('flap_outside').onclick = function(){
document.getElementById('flap_outside').classList.toggle('open');
document.getElementById('flap_inside').classList.toggle('open');
// Add Remove Card Event Handler
// This is added after "Open Envelope" so that card can't be removed
// until the envelope has been opened
document.getElementById('envelope_back_outside').onclick = function(){
document.getElementById('card').classList.toggle('removed');
return false;
}
return false;
}
// Open Card
document.getElementById('card').onclick = function(){
document.getElementById('card_outside_front').classList.toggle('open');
document.getElementById('card_inside_top').classList.toggle('open');
return false;
}
}
</script>
CSS:
<style type="text/css">
body{
background-color: #fff;
color: #666;
font-family: Futura, Helvetica, Sans-serif;
text-align: center;
-webkit-perspective: 1000;
}
#envelope{
position: relative;
width: 600px;
height: 400px;
margin: 200px auto 0 auto;
}
#envelope_front{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
z-index: 1; /* This seems required for Chrome */
background: #FFF url('images/card-sprite.png') 0px 0px;
cursor: pointer;
-webkit-transition: all 4s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg) translateZ(10px);
}
#envelope_front.flipped{
-webkit-transform: rotateY(-180deg);
}
#envelope_back{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
background: #FFF url('images/card-sprite.png') -600px -400px;
-webkit-transition: all 4s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg) translateZ(3px);
}
#envelope_back.flipped{
-webkit-transform: rotateY(0deg);
}
#flap_outside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
background: transparent url('images/card-sprite.png') -600px -200px;
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(0) translateZ(3px);
}
#flap_outside.open{
-webkit-transform: rotateX(180deg) translateZ(0);
}
#flap_inside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
background: transparent url('images/card-sprite.png') -600px 0px;
-webkit-transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(-180deg) translateY(-200px) translateZ(3px);
}
#flap_inside.open{
-webkit-transform: rotateX(0deg) translateY(-200px) translateZ(0);
}
#envelope_back_outside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
cursor: pointer;
background: transparent url('images/card-sprite.png') 0px -400px;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(2px);
}
#card{
position: absolute;
top: 10px;
left: 10px;
width: 580px;
height: 380px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(1px);
}
#card.removed{
-webkit-animation-name: remove-card;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#card_outside_front{
position: absolute;
width: 100%;
height: 100%;
background: #FFF url('images/card-sprite.png') -1800px 0px;
cursor: pointer;
-webkit-transition: all 1s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(0deg) translateZ(0px);
}
#card_outside_front.open{
-webkit-transform: rotateX(180deg);
}
#card_inside_top{
width: 100%;
height: 100%;
position: absolute;
background: #FFF url('images/card-sprite.png') -1210px -10px;
-webkit-transition: all 1s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 380px;
/* 379 is used instead of 380 to prevent any gap between the two layers (visible in Safari) */
-webkit-transform: translateZ(0px) translateY(-379px) rotateX(-180deg);
}
#card_inside_top.open{
-webkit-transform: translateZ(0px) translateY(-379px) rotateX(0deg);
}
#card_inside_bottom{
position: absolute;
width: 100%;
height: 100%;
z-index: -1; /* Hide behind #card_outside_front and #card_inside_top */
background: #FFF url('images/card-sprite.png') -1210px 390px;
}
/* Animation Keyframes for removing the card */
#-webkit-keyframes remove-card {
0% {
-webkit-transform: translateY(0px) translateZ(1px);
}
33% {
-webkit-transform: translateY(-400px) translateZ(1px);
}
67% {
-webkit-transform: translateY(-400px) translateZ(3px);
}
100% {
-webkit-transform: translateY(0px) translateZ(3px);
}
}
</style>`

You can use setTimeout with a given x delay time:
setTimeout(function() {
//put your animation code here
}, 2000);

To delay the animations in JS (and JQuery) you can use the delay function, you already are using it in some places. If you want the delay on the CSS you should apply the animation-delay property

You can use a timeout or you can use css animation-delay property without using too much javascript (I usually pick the second).

Make hamburger menu fadeout work

I am doing a "hamburger" menu, responsive style, with a menu that will cover the page the viewer is at.
I got all HTML/CSS figured out, but I wanted to add fade in and fade out effects.
Fade in works with jquery code but the menu isn't fading out. Already tried some ideas that were on SO but none works.
Any help? Fiddle: https://jsfiddle.net/f19kz640/
Sorry for bad eng...
HTML
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</header>
CSS
body{
background-color: #000;
}
#menu{
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: #006973;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #fff;
list-style: none;
text-transform: uppercase;
padding: 0px;
line-height: 75px;
padding: 10px 700px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
Javascript/JQuery
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});

You could easily simplify things a great deal:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
$('#menu').fadeToggle(300);
});
});
Updated Fiddle
There's no reason to play with opacity properties or display properties, it's all part of the jQuery fade() function, which you can merely toggle.

Why are the CSS transforms not displayed?

I'm trying to make a navigation panel slide in on the click of a nav button in the main menu. Needless to say, it's not working. I've made this work before, so I'm not sure what's going on. Help?
HTML
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i class="account-control fa fa-user"></i>
</div>
<div class="wrapper">
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li>Billing</li>
<li>Support</li>
<li>Servers</li>
<li>Settings</li>
<li>Reports</li>
</ul>
</nav>
</div>
<!-- Copyright -->
<footer>
<form action="" class="search">
<input type="search" name="search" placeholder="Search">
</form>
<p class="copyright">asdf</p>
</footer>
</div>
</div>
Relevant CSS
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
top: 100px;
z-index: 0;
overflow: hidden;
}
#content {
position: relative;
left: 0;
z-index: 5;
height: 100%;
overflow: auto;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.sidebar-open #content {
-webkit-transform: translate(200px, 0);
-moz-transform: translate(200px, 0);
transform: translate(200px, 0);
}
/* Header */
.header {
background-color: #222222;
width: 100%;
height: 100px;
position: absolute;
top: 0;
z-index: 1;
}
#nav-button {
font-size: 24px;
color: white;
position: absolute;
left: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
#nav-button.open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.account-control {
font-size: 24px;
color: white;
position: absolute;
right: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Navigation */
#sidebar {
position: absolute;
top: 100px;
left: 0;
visibility: hidden;
width: 200px;
height: 100%;
background: #222222;
opacity: 1;
z-index: 1;
-webkit-transform: all 0.5s;
-moz-transform: all 0.5s;
transform: all 0.5s;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.sidebar-open #sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: transform;
-moz-transition-property: transform;
transition-property: transform;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
#sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.sidebar-open #sidebar:after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
-moz-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.nav-items {
max-height: 100%;
position: relative;
overflow: auto;
bottom: 60px;
}
.mainmenu ul {
margin: 0;
}
.mainmenu ul li a {
padding: 0 40px;
width: 100%;
line-height: 60px;
display: inline-block;
color: #202020;
text-decoration: none;
}
.mainmenu ul li a :hover, .mainmenu ul li a .active {
background: #e1e1e1;
}
JavaScript
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button, #content').click(function() {
$('#nav-button').toggleClass('open');
$('body').toggleClass('sidebar-open');
return false;
});
});(jQuery);
Yes, I am using FontAwesome. :)

Your biggest issue that solves your original question is due to overflow: hidden; on .wrapper.
Here it is removed: DEMO. But that opens up a whole new world of problems. I advise you to go back and refactor your code.

Have you tried to empty your cache?
Ctrl-Shift-Del so your browser will reload your css.
Note: If this happens to your users, try changing the link to your css in your header like this:
<link rel="stylesheet" href="css/main.css?v=2">