Develop Reference

Background images dont stay on sides of page when resolution changes

I'm pretty new to css animations but I've got my page looking how I want except for this one glitch. I have a scrolling animation using scrollspy.js and when it hits a certain div images slideinleft or slideinright into the page.
Link here
However when you hit control + mwheel down it doesn't start the anims from outside of the browser window like i would prefer it to. I'm using 1920x1080 res, for reference.
Basically, on page load it looks fine:
But again, when employing the ctrl + mwheel down it becomes this ugly looking page:
I need it to scale.
Any css gurus know what I'm doing wrong?
HTML:
<div class="flex-row panel-row-style panel-row-style-for-4-1 page left-phone has-bg feed active" style="margin-top: 100px; animation-name: slideInLeft;">
<div id="pgc-4-1-0" class="panel-grid-cell panel-grid-cell-empty"></div><div id="pgc-4-1-1" class="panel-grid-cell">
<div id="panel-4-1-1-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
<div class="top-img panel-widget-style panel-widget-style-for-4-1-1-0">
<div class="so-widget-sow-image so-widget-sow-image-default-eef982a7180b">
<div class="sow-image-container phone">
<img src="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png" width="400" height="831" srcset="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png 400w, http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2-144x300.png 144w" sizes="(max-width: 400px) 100vw, 400px" class="so-widget-image">
<img class="screen-left layer" src="http://streamlistapp.com/wp-content/uploads/2017/07/purse-inside-screen.png">
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-2" class="panel-grid-cell panel-grid-cell-mobile-last animated" style="visibility: visible; animation-name: undefined;">
<div id="panel-4-1-2-0" class="so-panel widget widget_siteorigin-panels-builder panel-first-child panel-last-child" data-index="3">
<div id="pl-w5973cd6d9c123" class="panel-layout">
<div id="pg-w5973cd6d9c123-0" class="panel-grid panel-no-style">
<div id="pgc-w5973cd6d9c123-0-0" class="panel-grid-cell">
<div id="panel-w5973cd6d9c123-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0">
<div class="link-s front panel-widget-style panel-widget-style-for-w5973cd6d9c123-0-0-0">
<div class="so-widget-sow-editor so-widget-sow-editor-base">
<div class="siteorigin-widget-tinymce textwidget">
<h4>
STREAMING<br>
MARKETPLACE
</h4>
<h3>Streamlist</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-3" class="panel-grid-cell panel-grid-cell-empty"></div>
CSS:
.can-transform3d .active.has-bg:before,
.can-transform3d .active.has-bg:after,
.can-transform3d .past-active.has-bg:before,
.can-transform3d .past-active.has-bg:after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
/*transform: translate3d(328px, 0, 0);*/
transform: translate3d(0px, 0, 0);
}
.has-bg {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.has-bg:before,
.has-bg:after {
content: '';
position:absolute;
display: block;
opacity: 0;
-webkit-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-moz-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-o-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-ms-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-webkit-transition-delay: .25s; /* Safari */
transition-delay: .25s;
z-index: 1;
visibility: visible;
background-repeat: no-repeat;
background-attachment: scroll;
clear: both;
/*width: 100%;*/
}
.past-active:before,
.past-active:after,
.active:before,
.active:after {
opacity: 1 !important;
}
.page {
height: auto;
width: 100%;
position: relative;
text-align: center;
/*padding-top: 60px;*/
z-index: 1;
}
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:after,
.can-transform3d .left-phone:after {
-webkit-transform: translate3d(150px , 0, 0);
-moz-transform: translate3d(150px , 0, 0);
-o-transform: translate3d(150px , 0, 0);
-ms-transform: translate3d(150px , 0, 0);
/*transform: translate3d(682px , 0, 0);*/
transform: translate3d(150px , 0, 0);
}
.left-phone:before,
.left-phone:after {
margin-left: 0;
/*right: 0;*/
}
.active .phone .screen-left, .active .phone .screen-right,
.past-active .phone .screen-left, .past-active .phone .screen-right {
opacity: 1;
}
.phone .screen-left, .phone .screen-right {
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.phone .screen-left {
position: absolute;
top: 12.06656%;
left: 22.37791%;
/*width: 75.460123%;*/
}
.layer {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.feed:before, .discover:before {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/watch3-transparent-bg-e1500713498530.png);
/*top: -150px;*/
height: 564px;
width: 330px;
/*right: -425px;*/
right: -425px;
/*background-position: right center;*/
}
.feed:after, .discover:after {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/bracelet-e1500713698821.jpeg);
height: 260px;
width: 260px;
bottom: 0;
/*right: 15%;*/
right: -6%;
/*background-position: 70% center;*/
}
Scroll spy functions:
//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){
$('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
wow.addBox(this);
}).scrollSpy();
$('#pgc-4-1-2').on('scrollSpy:enter',function(){
$(this).removeClass('animated');
$('.panel-row-style-for-4-1')
.removeClass('past-active')
.addClass('active')
.removeClass('animated')
.css({
'animation-name' : 'slideInLeft'
})
wow.addBox(this);
}).scrollSpy();

Trigger click on one anchor when another is clicked

When I click on the link, I would like the link to be also clicked. However, nothing happens with my code, see fiddle.
HTML:
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next" onClick="load()">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
JavaScript:
function load() {
$("#foo").tigger('click');
}
function burn() {
$(this).css("color", "red");
}

I personally prefer writing it this way: JS Fiddle
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
nav a {
position: absolute;
top: 50%;
display: block;
outline: none;
text-align: left;
z-index: 1000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
nav a.prev {
left: 0;
}
nav a.next {
right: 0;
}
nav a svg {
display: block;
margin: 0 auto;
padding: 0;
}
/*--------------------*/
/* Fillpath (http://www.nizuka.fr/)*/
/*--------------------*/
.color-10 {
background: #f3cf3f;
}
.nav-fillpath a {
width: 100px;
height: 100px;
}
.nav-fillpath .icon-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
position: absolute;
left: 50%;
width: 3px;
height: 50%;
background: #566475;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
z-index: 100;
height: 0;
background: #fff;
-webkit-transition: height 0.3s, -webkit-transform 0.3s;
transition: height 0.3s, transform 0.3s;
}
.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-135deg);
transform: translateX(-50%) rotate(-135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a.next::before,
.nav-fillpath a.next .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(135deg);
transform: translateX(-50%) rotate(135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.nav-fillpath a.next::after,
.nav-fillpath a.next .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.nav-fillpath h3 {
position: absolute;
top: 50%;
margin: 0;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 0.85em;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpath a.prev h3 {
left: 100%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
right: 100%;
text-align: right;
-webkit-transform: translateY(-50%) translateX(50%);
transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
height: 50%;
}
.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(-125deg);
transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before,
.nav-fillpath a.next:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(125deg);
transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(-55deg);
transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(55deg);
transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
opacity: 1;
-webkit-transform: translateY(-50%) translateX(0);
transform: translateY(-50%) translateX(0);
}
#media screen and (max-width: 520px) {
.nav-slide a.prev,
.nav-reveal a.prev,
.nav-doubleflip a.prev,
.nav-fillslide a.prev,
.nav-growpop a.prev {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.nav-slide a.next,
.nav-reveal a.next,
.nav-doubleflip a.next,
.nav-fillslide a.next,
.nav-growpop a.next {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.nav-slide a,
.nav-reveal a,
.nav-doubleflip a,
.nav-fillslide a {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
.nav-growpop a {
-webkit-transform: translateY(-50%) scale(0.6);
transform: translateY(-50%) scale(0.6);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
Update:
using this is better because this way you separate your javascript all in .js or <script> instead of having it scattered on DOM elements so keep the HTML "clean", something like the inline CSS vs external CSS. Beside doing it this way you can easily attach more than one event..
This post jQuery.click() vs onClick has more detailed answer.

There is a typo in load() function:
function load() {
$("#foo").trigger('click'); //'r' was missing
}
Please note that
$(this)
inside burn() function returns window instance, is that what you are expecting there?
In case you want to change color of a link that gets clicked here is a HTML code (notice event parameter added):
Name Surname
and js:
function burn(element) {
$(element).css("color", "red");
}
This solution with 'this' lets you reuse burn() function for more that one link, it doesn't bind you to #foo elemenent only.

jquery button trigger css

i want to make a button which have jquery function can trigger the css which will flip the card.
i do not know Trigger , toggle or addClass to use. Help thanks !
I actually want it to automatically flip from num 1 to 10.
With looping , how is it going to achieve ?
html
<div class="panel" id="card2">
<div class="front card">
<img src="0.png">
</div>
<div class="back card">
<img src="2.png">
</div>
</div>
css
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front, .togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back ,.toggleback{
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}

You could use jQuery UI's .switchClass() function to remove and add the specified class. Here is an example:
$("#flip").click(function() {
$(".card").each(function(index) {
if ($(this).hasClass("front")) {
$(this).switchClass("front", "back");
return;
}
if ($(this).hasClass("back")) {
$(this).switchClass("back", "front");
return;
}
});
});
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front,
.togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back,
.toggleback {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<button type="button" id="flip">Flip!</button>
<div class="front card">
<img src="http://i.stack.imgur.com/lSjRc.jpg">
</div>
<div class="back card">
<img src="http://i.stack.imgur.com/j5qcg.jpg">
</div>
Or you just use the .removeClass() and .addClass() functions. Here is an example without jQuery UI:
$("#flip").click(function () {
$(".card").each(function (index) {
if ($(this).hasClass("front")) {
$(this).removeClass("front");
$(this).addClass("back");
return;
}
if ($(this).hasClass("back")) {
$(this).removeClass("back");
$(this).addClass("front");
return;
}
});
});

JQUERY
$('.btn').click(function() {
$('.front').addClass('front-flip');
$('.back').addClass('back-flip');
});
You'll need to create a <button> element, and assign an event handler to that button using the code above. Essentially you'll create two new classes front-flip and back-flip which mimic the same CSS that you're currently assigning on hover to flip the card/image over.
See working example here - should set you on the right path EXAMPLE

Example Fiddle
I'm not sure this is the right way to do that, but it's work and you can improve it :
HTML :
<div class="panel panel_1" id="card2">
<div class="front card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211813364.png">
</div>
<div class="back card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211808744.png">
</div>
</div>
<button id='flip_card'>Flip card</button>
CSS :
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
JS :
//Flip card function
$('#flip_card').click(function(){
var card_id = 'card2';
if($('#'+card_id+' .front').css('z-index')==1)
flip_front(card_id);
else
flip_back(card_id);
});
//Flip back of card
flip_back = function(card_id){
$('#'+card_id+' .front').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .back').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
//Flip front of card
flip_front = function(card_id){
$('#'+card_id+' .back').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .front').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
Hope this helps.

Off canvas menu not working on Iphone 5

I have an off canvas menu that "according to my client" that appears to not be functioning correctly. There are no errors whatsoever in my console, so I am not sure whats going on here, and i don't have an Iphone/pad to test on. Anyone want to give this a shot? demo
html:
<html>
<body>
<div id="site-wrapper" class="container">
<nav id="site-menu">
<ul class="nav">
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</nav>
<header id="header">
<a class="brand" href="/">My Company</a><br />
</header>
<div id="site-canvas">
<div id="mainbody">
<div class="container-fluid">
<p>main content</p>
</div>
</div>
<footer>
<p>footer</p>
</footer>
</div>
</div>
</body>
</html>
css/less:
header {
position: fixed;
top: 0;
z-index: #z-index * 6;
overflow: hidden;
width: 100%;
height: 65px;
}
#site-wrapper {
.reset-box;
}
#mainbody {
width: #100;
margin: 65px auto 0;
}
#menuToggle {
position: fixed;
top: 15px; left: 0;
z-index: #z-index * 7;
}
#menuButton {
background-color: #black;
margin: 0;
padding: 0;
height: 35px;
width: 50px;
}
#menuButton:hover {background-color: #black-hover;}
#site-menu {
background-color: #black;
height: #100;
position: fixed;
top: 0; left: -340px;
width: 330px;
z-index: #z-index * 5;
}
#site-menu:after {z-index: #z-index * 7;}
#site-canvas {
backface-visibility: hidden;
height: #100;
transform: translateX(0);
transform: translate3d(0, 0, 0);
width: #100;
}
/********************************
/* OFF CANVAS MENU
/*******************************/
.show-nav #site-canvas {
transform: translateX(330px);
transform: translate3d(330px, 0, 0);
}
.reveal #site-menu {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
.reveal .show-nav #site-menu {
transition: 900ms ease all;
transform: translateX(330px);
transform: translate3d(330px, 0, 0);
}
.reveal .show-nav #site-canvas {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
and last but not least the js:
/********************************
/* OFF CANVAS MENU
/*******************************/
$(document).ready(function(){
var special = ['reveal'];
$('.main-menu').click(function() {
var transitionClass = jQuery(this).data('transition');
if ($.inArray(transitionClass, special) > -1) {
$('body').removeClass();
$('body').addClass(transitionClass);
} else {
$('body').removeClass();
$('#site-canvas').removeClass();
$('#site-canvas').addClass(transitionClass);
}
$('#site-wrapper').toggleClass('show-nav');
$('.main-menu i').toggleClass('fa-ellipsis-v fa-ellipsis-h');
$('.main-menu div').toggle();
return false;
});
});
/********************************
/* OFF CANVAS MENU HEIGHT
/*******************************/
$(document).ready(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
$(window).resize(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
});
});
/********************************
/* NAV ACCORDIAN
/*******************************/
$(document).ready(function(){
$('.accordian-toggle').click(function(){
$('#site-menu .nav > .parent > .nav-child').slideUp();
if(!$(this).next().is(':visible')){
$(this).next().slideDown();
}
});
});

I found the problem was missing vendor prefixes...
/********************************
/* OFF CANVAS MENU
/*******************************/
.show-nav #site-canvas {
transform: translateX(-330px);
transform: translate3d(-330px, 0, 0);
-webkit-transform: translateX(-330px);
-webkit-transform: translate3d(-330px, 0, 0);
-ms-transform: translateX(-330px);
-ms-transform: translate3d(-330px, 0, 0);
}
.reveal #site-menu {
transform: translateX(0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translateX(0);
-ms-transform: translate3d(0, 0, 0);
}
.reveal .show-nav #site-menu {
transition: 900ms ease all;
transform: translateX(-330px);
transform: translate3d(-330px, 0, 0);
-webkit-transform: translateX(-330px);
-webkit-transform: translate3d(-330px, 0, 0);
-ms-transform: translateX(-330px);
-ms-transform: translate3d(-330px, 0, 0);
}
.reveal .show-nav #site-canvas {
transform: translateX(0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translateX(0);
-ms-transform: translate3d(0, 0, 0);
}

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">