Develop Reference

I am trying to get my Javascript to cooperate and open my hamburger icon with my links inside

Here is the code I am trying to get to cooperate with one another. I just need my Javascript to help in opening my hamburger icon menu. Currently, my hamburger icon works. It will create an "x" when clicked on, but it's just that my menu does not display when I click on the hamburger icon as it should.
* JAVASCRIPT *
export const navAnimation = function () {
const hamburgerDiv = document.querySelector(".nav--hamburger");
const hamburgerIcon = document.querySelector(".hamburger");
const nav = document.querySelector(".nav--ul");
const blur = document.querySelector(".blur");
hamburgerDiv.addEventListener("click", () => {
// nav.classList.toggle("hidden");
hamburgerIcon.classList.toggle("hidden");
cross.classList.toggle("hidden");
nav.classList.toggle("move-in");
nav.classList.toggle("move-out");
// blur.classList.toggle("hidden");
blur.classList.toggle("move-in");
blur.classList.toggle("move-out");
});
};
navAnimation();
// Hamburger Icon //
$(document).ready(function(){
$('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
* HTML *
<header class="header">
<div class="blur move-out"></div>
<div class="header--logo">
<img src="images/Logo-2.png" alt="Site logo" class="logo"/>
</div>
<nav class="nav">
<div class="nav--hamburger">
<div id="nav-icon1" class = "hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="nav--ul move-out">
<li class="nav--li--item">
<a class="nav--li--anchor" href="#home">
<span class="order"></span>HOME
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#about">
<span class="order"></span>ABOUT
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#services"
><span class="order"></span>SERVICES
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="booking">
<span class="order"></span>BOOKING
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#footer">
<span class="order"></span>CONTACT US
</a>
</li>
</ul>
</nav>
</header>
* CSS *
<style>
#nav-icon1 {
width: 55px;
position: relative;
margin: 0px auto;
-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-icon1 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #551a00;
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;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 10px;
}
#nav-icon1 span:nth-child(3) {
top: 20px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nav {
font-family: "Bellefair", serif;
color: #fff;
font-size: var(--step-0);
font-weight: 700;
position: absolute;
top: 0;
right: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: end;
width: 80%;
overflow: hidden;
}
.nav--ul {
list-style-type: none;
letter-spacing: 2px;
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
min-height: 100vh;
align-items: start;
width: 100%;
position: relative;
z-index: 2;
padding-left: 2rem;
}
.nav--li--anchor {
color: #fff;
text-decoration: none;
}
.nav--li--anchor:hover {
cursor: pointer;
}
.cross {
position: absolute;
top: 3%;
right: 10%;
transform: translate(-3%, -10%);
}
.blur {
width: 80%;
left: 20%;
position: absolute;
min-height: 118.3vh;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
z-index: 2;
}
.hidden {
visibility: hidden;
}
.move-in {
animation: scale-in-hor-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
</style>

Responsive Navbar: Menu Not Disappearing (CSS and JS)

Building a responsive menu bar. The problem is when you click the hamburger lines and the page options appear, when you click the links, the menu doesn't disappear. I've tried adding and removing a class disappear{display:none}, and I've also tried building a for loop but neither works. I know I'm way overthinking this, what options should I explore to fix it?
(Note that you may have to shrink your screen down to less than 600px in width to see the hamburger menu if it isn't currently available to click)
lkl;
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.getElementsByClassName('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-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;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
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;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
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: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

the problem was using getElementsByClassName like this document.getElementsByClassName('.links').forEach you can not use forEach and .linke css selector with getElementsByClassName use querySelectorAll
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.querySelectorAll('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-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;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
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;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
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: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

when using getElementsByClassName you shouldn't use . while specifying the class.
getElementsByClassName returns HTMLCollection that doesn't have forEach loop, so you need to convert it into array as:
const linksArray = [...links];
or
const linksArray = Array.from( links );
You can also use querySelectorAll(".links")
const toggleBtn = document.getElementById("nav_check");
const menuBtn = document.getElementById("nav_icon");
toggleBtn.addEventListener("click", function() {
if (!menuBtn.classList.contains("open")) {
menuBtn.classList.add("open");
} else {
menuBtn.classList.remove("open");
}
});
const links = document.getElementsByClassName("links");
const linksArray = [...links];
linksArray.forEach((item) => {
item.addEventListener("click", (event) => {
document.getElementById("nav_check").checked = false;
menuBtn.classList.remove("open");
});
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background: #d3d3d3;
}
.navBar {
width: 100%;
height: 3.3rem;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #0A2463;
position: fixed;
color: #fafafa;
}
.nav_btn {
display: none;
}
.nav_links>a {
padding: .5rem;
margin: auto;
text-decoration: none;
color: #fafafa;
}
.nav_links>a:hover {
color: #ED1250;
}
#nav_check,
#nav_icon {
display: none;
}
.resume {
color: #ED1250;
border-radius: 4px;
border: solid #ED1250 1px;
padding: .5rem;
margin-right: .5rem;
}
.resume:hover {
background: rgb(237, 18, 80, .2);
color: #fafafa;
}
.social {
display: none;
}
#media (max-width:600px) {
.navBar {
height: 3.3rem;
}
.nav_btn {
display: inline-block;
float: right;
}
#nav_icon {
display: block;
width: 60px;
height: 45px;
position: fixed;
right: 1rem;
top: -3rem;
margin: 50px auto;
z-index: 6;
-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;
border: solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
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;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),
#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
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: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-weight: 400;
line-height: 4.5rem;
font-size: 3rem;
background: #0A2463;
}
.menu_textWrapper {
display: flex;
flex-direction: column !important;
width: 18rem;
background: #0A2463;
}
.links:hover::after {
content: "»";
font-size: 2.5rem;
}
#nav_check:not(:checked)~menu {
display: none;
}
.navBar>#nav_check:checked~.menu {
display: flex;
flex-direction: column;
}
}
/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>

const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
[].forEach.call( document.getElementsByClassName('links'), item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-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;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
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;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
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: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>
please use:
[].forEach.call( document.querySelectorAll('a'), function(el) {
// whatever with the current node
});

Div doesn't work when it's added more than once

I am using this code to create a gift box and it works fine when there is only one box.
However, when I add a new gift box next to the current one horizontally, I can see the added one but I am unable to open it. Gift boxes seem to work as intended until a user tries to open the added box/boxes.
How can I fix this?
Thanks for your time!
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementById("present");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
present.addEventListener("click", function(e) {
present.classList.toggle("open");
}, false);
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>

Coderman was close, but there is not a singular form of GetElementsByClassName in Javascript.
You need to iterate over all of the instances of the class and add a handler to each of them.
var to = 'Friend!';
var gift_url = 'https://stackoverflow.com/';
var gift_image_url = 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png';
var nametag = document.getElementById("nametag");
var present = document.getElementsByClassName("present-box");
var presentImage = document.getElementById("present-image");
function init() {
var _giftLink,
_giftImg;
if (gift_url) {
_giftLink = document.createElement("a");
_giftLink.href = gift_url;
_giftLink.target = "_blank";
presentImage.appendChild(_giftLink);
}
if (gift_image_url) {
_giftImg = document.createElement("img");
_giftImg.src = gift_image_url;
if (_giftLink) {
_giftLink.appendChild(_giftImg);
} else {
presentImage.appendChild(_giftImg);
}
}
for (var i = 0; i < present.length; i++) {
present[i].addEventListener("click", function(e) {
this.classList.toggle("open");
}, false);
}
nametag.innerText = to;
}
init();
html,
body {
margin: 0;
}
.above-fold {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
position: relative;
}
.above-fold .info-text {
width: 100%;
display: block;
text-align: center;
margin: 0;
padding: 0;
color: #555;
font-family: 'Avenir';
font-weight: 100;
font-size: 13px;
height: 25px;
align-self: flex-end;
}
.wrap-present {
width: 100%;
display: -webkit-box;
display: flex;
align-self: flex-end;
}
.present-box {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: auto;
-webkit-animation: rotate 11s alternate linear infinite;
animation: rotate 11s alternate linear infinite;
cursor: pointer;
}
.present-box:hover {
-webkit-animation: staticFront 700ms ease forwards;
animation: staticFront 700ms ease forwards;
}
.present-box.open {
/*&>.side.top{
opacity: .2;
}*/
-webkit-animation: zoomIn 1s ease-in forwards;
animation: zoomIn 1s ease-in forwards;
-webkit-transform: rotateX(-103deg) rotateY(-180deg);
transform: rotateX(-103deg) rotateY(-180deg);
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box.open .present {
pointer-events: auto;
visibility: visible;
}
.present-box.open .present .img-wrap {
opacity: 1;
-webkit-transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: opacity 800ms 200ms, -webkit-transform 600ms 800ms;
transition: transform 600ms 800ms, opacity 800ms 200ms;
transition: transform 600ms 800ms, opacity 800ms 200ms, -webkit-transform 600ms 800ms;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
.present-box.open > .side {
opacity: .3;
-webkit-transition: opacity 500ms 600ms;
transition: opacity 500ms 600ms;
}
.present-box.open > .side.back {
opacity: 0.7;
-webkit-transform: translateZ(-101px) rotateY(180deg);
transform: translateZ(-101px) rotateY(180deg);
}
.present-box.open > .side.front {
-webkit-transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: opacity 500ms 600ms, -webkit-transform 800ms 0s;
transition: transform 800ms 0s, opacity 500ms 600ms;
transition: transform 800ms 0s, opacity 500ms 600ms, -webkit-transform 800ms 0s;
-webkit-transform: translateZ(100px) rotateY(190deg) translateX(0px);
transform: translateZ(100px) rotateY(190deg) translateX(0px);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0.3;
}
.present-box .present {
position: absolute;
width: 200px;
height: 200px;
z-index: 50;
-webkit-transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
transform: rotateY(-180deg) rotateX(180deg) translateZ(-100px);
display: -webkit-box;
display: flex;
-webkit-perspective: 600px;
perspective: 600px;
pointer-events: none;
visibility: hidden;
}
.present-box .present > .img-wrap {
width: 200px;
align-self: center;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
opacity: 0;
-webkit-transform: translateZ(-80px);
transform: translateZ(-80px);
}
.present-box .present > .img-wrap a {
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms;
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
position: relative;
display: block;
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.present-box .present > .img-wrap a:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.present-box .present > .img-wrap img {
max-width: 100%;
height: auto;
}
.present-box > .side {
width: 200px;
height: 200px;
position: absolute;
display: block;
background: repeating-linear-gradient(45deg, #cc2000, #cc2000 20px, #ffffff 20px, #ffffff 40px);
top: 0;
left: 0;
-webkit-transition: -webkit-transform 400ms;
transition: -webkit-transform 400ms;
transition: transform 400ms;
transition: transform 400ms, -webkit-transform 400ms;
}
.present-box > .side.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.present-box > .side.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
transform-origin: top right;
}
.present-box > .side.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
transform-origin: center left;
}
.present-box > .side.top {
-webkit-transform: rotateX(-90deg) translateY(-100px);
transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 100px;
perspective: 100px;
text-align: center;
}
.present-box > .side.top .to {
display: inline-block;
font-family: cursive;
position: relative;
padding: 10px 10px 30px 10px;
border: 5px dotted #ff6666;
border-width: 2px;
background: #fff;
margin: auto;
-webkit-transform: translateZ(-2px) translateY(50px);
transform: translateZ(-2px) translateY(50px);
}
.present-box > .side.top .to:after {
content: 'Merry Christmas';
display: inline-block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color: #990000;
}
.present-box > .side.top .to .name {
display: block;
position: absolute;
-webkit-transform: translateY(20px) rotateY(180deg) translateX(10px);
transform: translateY(20px) rotateY(180deg) translateX(10px);
text-align: center;
width: 100%;
font-size: 1.1rem;
color: green;
}
.present-box > .side.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.present-box > .side.front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotateY(-360deg) rotateX(180deg);
transform: rotateY(-360deg) rotateX(180deg);
}
}
#-webkit-keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#keyframes staticFront {
100% {
-webkit-transform: rotateX(-100deg) rotateY(-180deg);
transform: rotateX(-100deg) rotateY(-180deg);
}
}
#-webkit-keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
#keyframes zoomIn {
50% {
-webkit-transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
transform: rotateX(-143deg) rotateY(-180deg) translateZ(-15px);
}
100% {
-webkit-transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
transform: rotateX(-167deg) rotateY(-180deg) translateZ(-15px) scale(1.2);
}
}
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>
<section class="above-fold">
<div class="wrap-present">
<div class="present-box" id="present2">
<div class="present">
<div class="img-wrap" id="present-image">
</div>
</div>
<div class="side front"></div>
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top">
<span class="to">
<span class="name" id="nametag">
</span>
</span>
</div>
<div class="side bottom"></div>
</div>
</div>
<p class="info-text">Click to Open</p>
</section>

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