We Keep Coding

Close the overlay fullscreen menu when anchor link is clicked

I am not good in Javascript, and I know this is very easy for some of you.
I adopted the overlay fullscreen menu from Codepen. I am trying to figured it out how I can close the overlay fullscreen menu when I clicked the anchor link.
snippet here
#import "http://webfonts.ru/import/notcourier.css";
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div>
can anyone help me to close the overlay fullscreen menu by adding javascript on the code?

$( ".target" ).click(function() {
$("#op").prop('checked', false);
});
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li><a class="target" href="#">Home</a></li>
<li><a class="target" href="#">About</a></li>
<li><a class="target" href="#">Work</a></li>
<li><a class="target" href="#">Clients</a></li>
<li><a class="target" href="#">Contact</a></li>
</ul>
</nav>
</div>

jQuery slider converted to vanilla JavaScript not working

I'm building a slider and I want to avoid jQuery.
So I'm trying to convert some jQuery code to vanilla JavaScript.
Here's the jQuery:
setInterval(function() {
var $curr = $('#slider1 input[type=radio]:checked');
var $next = $curr.next('input');
if(!$next.length) $next = $('#slider1 input[type=radio]').first();
$next.prop('checked', true);
}, 2000);
My code is below, but it's not working.
What's going wrong?
setInterval(() => {
let $curr = document.querySelectorAll('#slider1 input[type=radio]:checked'),
$next = $curr.nextSibling;
if (!$next.length) {
$next = document.querySelectorAll('#slider1 input[type=radio]').firstChild;
}
$next.setAttribute('checked', true);
}, 3000);
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: 22px;
}
.csslider>input {
display: none;
}
.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
margin-left: -900%;
}
.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
margin-left: -800%;
}
.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
margin-left: -700%;
}
.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
margin-left: -600%;
}
.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
margin-left: -500%;
}
.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
margin-left: -400%;
}
.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
margin-left: -300%;
}
.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
margin-left: -200%;
}
.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
margin-left: -100%;
}
.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
margin-left: 0%;
}
.csslider>ul {
position: relative;
width: 820px;
height: 420px;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: #3A3A3A;
border: 10px solid #3A3A3A;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider>ul>li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider>ul>li.scrollable {
overflow-y: scroll;
}
.csslider>.navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider>.navigation>div {
margin-left: -100%;
}
.csslider>.navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #3A3A3A;
}
.csslider>.navigation label:hover:after {
opacity: 1;
}
.csslider>.navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
background: #71ad37;
border-radius: 50%;
padding: 6px;
opacity: 0;
}
.csslider>.arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider>.arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider>.arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3A3A3A;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider>.arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider>.arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/*#region MODULES */
/*#endregion */
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}
ul,
ol {
padding-left: 40px;
}
html,
body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}
body {
padding-bottom: 60px;
}
h1 {
font-weight: 700;
font-size: 310%;
}
h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}
#slider1 {
margin: 20px;
font-family: 'Lato';
}
#slider1>ul>li:nth-of-type(3) {
background: red;
}
#slider1>input:nth-of-type(3):checked~ul #bg {
width: 80%;
padding: 22px;
-moz-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
#slider1>input:nth-of-type(3):checked~ul #bg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: 0.5s 0.9s;
-o-transition: 0.5s 0.9s;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
#slider1>input:nth-of-type(6):checked~ul #dex-sign {
-moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
animation: sign-anim 3.5s 0.5s steps(85) forwards;
}
#bg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}
#bg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: green;
-webkit-filter: blur(7px);
}
#bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#bg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}
.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#center {
text-align: center;
margin-top: 25%;
}
#center a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
}
/*___________________________________ LINK ___________________________________ */
a.nice-link {
position: relative;
color: #71ad37;
}
h1 a.nice-link:after {
border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 100%;
width: 0;
max-width: 100%;
background: #3A3A3A;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
/*___________________________________ SIGN ___________________________________ */
#dex-sign {
width: 255px;
height: 84px;
position: absolute;
left: 33%;
top: 45%;
opacity: 0.7;
background: white 0 0 no-repeat;
}
#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" checked="checked" id="slides_1" />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" />
<input type="radio" name="slides" id="slides_4" />
<input type="radio" name="slides" id="slides_5" />
<input type="radio" name="slides" id="slides_6" />
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
<li>Slide 6</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
<label class="goto-first" for="slides_1"></label>
<label class="goto-last" for="slides_6"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
</div>
</div>
</div>
View on Codepen.
Edit
I came up with this solution:
setInterval(function() {
var currentID = document.querySelector('input[name="slides"]:checked').id;
var idNoArr = currentID.split('');
var intIdNo = parseInt(idNoArr[1]);
var nextIdNo = intIdNo + 1;
var NextId = idNoArr[0] + '' + nextIdNo;
var NextInput = document.getElementById(NextId);
if (!NextInput) {
NextId = idNoArr[0] + '_1';
}
document.getElementById(NextId).checked = true;
}, 1000);

There are several issues, including:
nextSibling isn't limited to inputs, and may even select white space between elements.
Elements don't have a length property.
Setting an attribute only sets the default state, not the current state.
I recommend selecting a list of all the inputs with querySelectorAll and then cycling through them using an index. To cycle the index within the appropriate bounds, I'm using the remainder of the current index divided by the total number of inputs.
Edit:
I see that your jQuery code determines which input is checked before changing the slide. This allows the automatic rotation to pick up where the user left off after they manually select a slide. I've modified my code accordingly.
You might also consider some functionality to stop or delay the automatic rotation if the user manually selects a slide. When someone clicks to a specific slide, I often choose to delay the automatic rotation for a few seconds or even have it stop completely. Just an idea.
Here's a working example:
// select node list of all inputs
var allInputs = document.querySelectorAll('#slider1 input[type=radio]');
// function to determine index of "checked" input in the list
function getCheckedIndex(list) {
for (let i = 0; i < list.length; i++) {
if (list[i].checked) {
return i;
}
}
}
// start the interval
setInterval(() => {
// determine index of "checked" input
let index = getCheckedIndex(allInputs);
// determine the next index
index = (index + 1) % allInputs.length;
// set the "checked" property
allInputs[index].checked = true;
}, 1000);
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: 22px;
}
.csslider>input {
display: none;
}
.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
margin-left: -900%;
}
.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
margin-left: -800%;
}
.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
margin-left: -700%;
}
.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
margin-left: -600%;
}
.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
margin-left: -500%;
}
.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
margin-left: -400%;
}
.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
margin-left: -300%;
}
.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
margin-left: -200%;
}
.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
margin-left: -100%;
}
.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
margin-left: 0%;
}
.csslider>ul {
position: relative;
width: 820px;
height: 420px;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: #3A3A3A;
border: 10px solid #3A3A3A;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider>ul>li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider>ul>li.scrollable {
overflow-y: scroll;
}
.csslider>.navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider>.navigation>div {
margin-left: -100%;
}
.csslider>.navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #3A3A3A;
}
.csslider>.navigation label:hover:after {
opacity: 1;
}
.csslider>.navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
background: #71ad37;
border-radius: 50%;
padding: 6px;
opacity: 0;
}
.csslider>.arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider>.arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider>.arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3A3A3A;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider>.arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider>.arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}
ul,
ol {
padding-left: 40px;
}
html,
body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}
body {
padding-bottom: 60px;
}
h1 {
font-weight: 700;
font-size: 310%;
}
h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}
#slider1 {
margin: 20px;
font-family: 'Lato';
}
#slider1>ul>li:nth-of-type(3) {
background: red;
}
#slider1>input:nth-of-type(3):checked~ul #bg {
width: 80%;
padding: 22px;
-moz-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
#slider1>input:nth-of-type(3):checked~ul #bg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: 0.5s 0.9s;
-o-transition: 0.5s 0.9s;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
#slider1>input:nth-of-type(6):checked~ul #dex-sign {
-moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
animation: sign-anim 3.5s 0.5s steps(85) forwards;
}
#bg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}
#bg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: green;
-webkit-filter: blur(7px);
}
#bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#bg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}
.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#center {
text-align: center;
margin-top: 25%;
}
#center a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
}
/*___________________________________ LINK ___________________________________ */
a.nice-link {
position: relative;
color: #71ad37;
}
h1 a.nice-link:after {
border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 100%;
width: 0;
max-width: 100%;
background: #3A3A3A;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
/*___________________________________ SIGN ___________________________________ */
#dex-sign {
width: 255px;
height: 84px;
position: absolute;
left: 33%;
top: 45%;
opacity: 0.7;
background: white 0 0 no-repeat;
}
#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" id="slides_1">
<input type="radio" name="slides" id="slides_2">
<input type="radio" name="slides" id="slides_3" checked>
<input type="radio" name="slides" id="slides_4">
<input type="radio" name="slides" id="slides_5">
<input type="radio" name="slides" id="slides_6">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
<li>Slide 6</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
<label class="goto-first" for="slides_1"></label>
<label class="goto-last" for="slides_6"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
</div>
</div>
</div>

How to make sidebar navbar open by default

I'm working on a website with a collapsible sidebar navigation. It works fine when it's closed upon loading, but what I want to do is have it open by default with the ability to close and reopen.
Below is the code being used. If you need any other clarification, please let me know.
Like I said, the menu opens and closes fine, but I want the roles to be reversed where it starts open and then closes on click. I feel like it's something small I'm overlooking, but I'm just not sure.
$(document).ready(function() {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function() {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
//overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
//overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function() {
$('#wrapper').toggleClass('toggled');
});
});
body {
position: relative;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: transparent;
}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
}
#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #1a1a1a;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(3):before {
background-color: #79aefe;
}
.sidebar-nav li:nth-child(4):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(5):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(6):before {
background-color: #7d5d81;
}
.sidebar-nav li:nth-child(7):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(8):before {
background-color: #2d2366;
}
.sidebar-nav li:nth-child(9):before {
background-color: #35acdf;
}
.sidebar-nav li:nth-child(10):before {
background-color: #ec1b5a;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger {
position: fixed;
top: 20px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open .hamb-middle {
display: none;
}
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/* Overlay */
/*-------------------------------*/
/*.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250,250,250,.8);
z-index: 1;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Brand
</a>
</li>
<li>
Home
</li>
<li>
Participant
</li>
<li>
Interaction
</li>
<li>
Fulfillment
</li>
<li>
Reports
</li>
<li>
References
</li>
<li>
Admin
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h1>Quit Smoking</h1>
<p>Why I want to quit I would save money. I would not smell like a stale cigarette. I would not have to look for a place to smoke all the time. My health would be better. I don't like feeling addicted. My family would stop nagging me to quit. Food
would taste better. I would fit in better socially. I would feel better about my future. I would set a good example for my family and friends.</p>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->

Just add class="toggled" in <div id="wrapper" > and isClosed = true;
and also change class of <button type="button" class="hamburger is-open" data-toggle="offcanvas"> for is-closed to is-open
$(document).ready(function() {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = true;
trigger.click(function() {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
//overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
//overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function() {
$('#wrapper').toggleClass('toggled');
});
});
body {
position: relative;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: transparent;
}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
}
#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #1a1a1a;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(3):before {
background-color: #79aefe;
}
.sidebar-nav li:nth-child(4):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(5):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(6):before {
background-color: #7d5d81;
}
.sidebar-nav li:nth-child(7):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(8):before {
background-color: #2d2366;
}
.sidebar-nav li:nth-child(9):before {
background-color: #35acdf;
}
.sidebar-nav li:nth-child(10):before {
background-color: #ec1b5a;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger {
position: fixed;
top: 20px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open .hamb-middle {
display: none;
}
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/* Overlay */
/*-------------------------------*/
/*.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250,250,250,.8);
z-index: 1;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="toggled" >
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Brand
</a>
</li>
<li>
Home
</li>
<li>
Participant
</li>
<li>
Interaction
</li>
<li>
Fulfillment
</li>
<li>
Reports
</li>
<li>
References
</li>
<li>
Admin
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-open" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h1>Quit Smoking</h1>
<p>Why I want to quit I would save money. I would not smell like a stale cigarette. I would not have to look for a place to smoke all the time. My health would be better. I don't like feeling addicted. My family would stop nagging me to quit. Food
would taste better. I would fit in better socially. I would feel better about my future. I would set a good example for my family and friends.</p>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->

A quick and dirty solution would be to add the following to the end of your $(document).ready function.
$('.hamburger').trigger('click');
It could be the desirable result if you want to show your visitor the animation on page load.
https://jsfiddle.net/tb65wrfa/

just add
trigger.trigger('click');
at the end of your document ready function. (dont put it outside)
what essentially we are doing is simulating a click on that hamburger icon as soon as document ready fires. so you dont need to change any of the existing code
http://api.jquery.com/trigger/

just add class toggled in id="wrapper"
and add change class="hamburger is-closed" to class="hamburger is-open"
Edited code

Just invert your toggle class, of course then you must change button class to start showing it as open instead of closed. Try this:
$(document).ready(function() {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = true;
trigger.click(function() {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
//overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
//overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function() {
$('#wrapper').toggleClass('toggled');
});
});
body {
position: relative;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: transparent;
}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper {
padding-left: 220px; //Instead of 0px
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 0px; //Instead of 220px
}
#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #1a1a1a;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(3):before {
background-color: #79aefe;
}
.sidebar-nav li:nth-child(4):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(5):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(6):before {
background-color: #7d5d81;
}
.sidebar-nav li:nth-child(7):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(8):before {
background-color: #2d2366;
}
.sidebar-nav li:nth-child(9):before {
background-color: #35acdf;
}
.sidebar-nav li:nth-child(10):before {
background-color: #ec1b5a;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger {
position: fixed;
top: 20px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open .hamb-middle {
display: none;
}
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/* Overlay */
/*-------------------------------*/
/*.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250,250,250,.8);
z-index: 1;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Brand
</a>
</li>
<li>
Home
</li>
<li>
Participant
</li>
<li>
Interaction
</li>
<li>
Fulfillment
</li>
<li>
Reports
</li>
<li>
References
</li>
<li>
Admin
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-open" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h1>Quit Smoking</h1>
<p>Why I want to quit I would save money. I would not smell like a stale cigarette. I would not have to look for a place to smoke all the time. My health would be better. I don't like feeling addicted. My family would stop nagging me to quit. Food
would taste better. I would fit in better socially. I would feel better about my future. I would set a good example for my family and friends.</p>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->

How can this menu be fixed so it can be responsive?

I have this menu: (the snippet is quite long), please look at the snippet in fullscreen...
$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 90%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translateX(-100%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
<div id="header">
<div class="header_logo">
JD
</div>
<div class="header_menu">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger">
</div>
</div>
</div>
It looks nice, but the problem is the smaller screens, it covers the logo and burger, i had an idea for smaller screens to be like this:
but i don't know how to achieve this, maybe i have some mistakes in code, or my concept is wrong.... Please help.

$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('.header_menu').toggleClass('hidden');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 90%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translateX(-100%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
#media (max-width: 700px) {
.hidden {
display: none;
}
.header_menu {
min-height: 200px;
width: 100%;
top: 64px;
}
.burger {
background-color: #000;
}
#menu li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
<div id="header">
<div class="header_logo">
JD
</div>
<div class="header_menu hidden">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger">
</div>
</div>
</div>

You can achieve this, using bootstrap library. Try like this , hope it will help.
$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('.header_menu_sm').toggleClass('is_open');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.hidden-lg.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.hidden-lg.open:before {
border-bottom: 5px solid #000;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.hidden-lg.open:after {
border-bottom: 5px solid #000;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 100%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translate(-90%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
.header_menu_sm {
width: 90%;
position: absolute;
background: #000;
margin-top: 10%;
right: 0;
left: 100%;
height: auto;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu_sm.is_open {
transform: translate(-100%,15%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu_sm {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
top: 50%;
left: 100%;
transform: translateY(0%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu_sm.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu_sm li {
list-style: none;
display: block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
#menu_sm li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div class="header_logo ">
JD
</div>
<div class="header_menu hidden-md hidden-xs hidden-sm">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger hidden-md hidden-xs hidden-sm">
</div>
<div class="burger hidden-lg hidden-xl">
</div>
</div>
</div>
<div class="header_menu_sm hidden-lg hidden-xl">
<span>MENU</span>
<ul id="menu_sm">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
</body>
</html>

Change nav bar background color when menu is toggled jQuery

I am trying to make the nav bar when at the top of the page prior to any scrolling allow a change of the background color from transparent to white when the navigation menu is toggled. I have tried adding class .whitenavbar and jQuery to accompany (/navbar toggle color/) but it doesn't work and now prevents the menu from toggling at all?
Any help is appreciated!
https://jsfiddle.net/43taovan/
CSS:
.navigation{
width:100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: grey;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation background transition*/
.bg {
background-color: #fff !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.show {
opacity: 1;
}
.navfade {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.header .logo { /* Before scroll */
color: white;
}
.bg .logo { /* After scroll */
color: #545454;
}
.navinstagram {
fill: #fff
}
.bg .navinstagram{
fill: #545454;
}
#toggle-menu span{
background: #fff;
}
.bg #toggle-menu span {
background: #545454;
}
.whitenavbar {
background: #fff;
}
/*----/----navigation background transition*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 0.5px solid rgba(0, 0, 0, .2);
border-top: 0.5px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
.instbtn-cont {
display: inline-block;
text-align: center;
margin-top: 10px;
padding-bottom: 30px;
}
.instbtn-cont .instbtn {
position: relative;
padding: 15px 20px;
border: 1px solid grey;
color: grey;
-webkit-font-smoothing: antialiased;
}
.instbtn-cont .instbtn:hover {
border: none;
}
.instbtn-cont .instbtn:hover .line-1 {
-webkit-animation: move1 1500ms infinite ease;
animation: move1 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-2 {
-webkit-animation: move2 1500ms infinite ease;
animation: move2 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-3 {
-webkit-animation: move3 1500ms infinite ease;
animation: move3 1500ms infinite ease;
}
.instbtn-cont .instbtn:hover .line-4 {
-webkit-animation: move4 1500ms infinite ease;
animation: move4 1500ms infinite ease;
}
.instbtn-cont .line-1 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
left: 0;
bottom: 0;
}
.instbtn-cont .line-2 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
left: 0;
top: 0;
}
.instbtn-cont .line-3 {
content: "";
display: block;
position: absolute;
width: 1px;
background-color: grey;
right: 0;
top: 0;
}
.instbtn-cont .line-4 {
content: "";
display: block;
position: absolute;
height: 1px;
background-color: grey;
right: 0;
bottom: 0;
}
#-webkit-keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#keyframes move1 {
0% {
height: 100%;
bottom: 0;
}
54% {
height: 0;
bottom: 100%;
}
55% {
height: 0;
bottom: 0;
}
100% {
height: 100%;
bottom: 0;
}
}
#-webkit-keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes move2 {
0% {
width: 0;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#-webkit-keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#keyframes move3 {
0% {
height: 100%;
top: 0;
}
54% {
height: 0;
top: 100%;
}
55% {
height: 0;
top: 0;
}
100% {
height: 100%;
top: 0;
}
}
#-webkit-keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
#keyframes move4 {
0% {
width: 0;
right: 0;
}
55% {
width: 100%;
right: 0;
}
100% {
width: 0;
right: 100%;
}
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li{
display: block;
padding: 30px;
}
}
/*----/----Landscape*/
jQuery
/*navigation icon animation*/
var trigger = 'X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navbar toggle color*/
$("#toggle-menu").click(function (e) {
$(".nav").addClass(".whitenavbar");
$('.nav').addClass('navfade');
}
else {
$('.nav').removeClass(".whitenavbar");
}
});
/*----/----navbar toggle color*/
/*Jump Scroll*/
$(function () {
var $window = $(window),
$document = $(document),
transitionSupported = typeof document.body.style.transitionProperty === "string",
scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function (e) {
var target, avail, scroll, deltaScroll;
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
target = $(this.hash);
target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
if (target.length) {
avail = $document.height() - $window.height();
if (avail > 0) {
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
} else {
scroll = 0;
}
deltaScroll = $window.scrollTop() - scroll;
if (!deltaScroll) {
return; // do nothing
}
e.preventDefault();
if (transitionSupported) {
$("html").css({
"margin-top": deltaScroll + "px",
"transition": scrollTime + "s ease-in-out"
}).data("transitioning", scroll);
} else {
$("html, body").stop(true, true)
.animate({
scrollTop: scroll + "px"
}, scrollTime * 1000);
return;
}
}
}
});
if (transitionSupported) {
$("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function (e) {
var $this = $(this),
scroll = $this.data("transitioning");
if (e.target === e.currentTarget && scroll) {
$this.removeAttr("style").removeData("transitioning");
$("html, body").scrollTop(scroll);
}
});
}
});
/*----/----Jump Scroll*/
/*contact let me know toggle*/
$("#container").hide();
$("#button").on('click', function() {
if($("#button").val() == 'thank you')
return false;
if($("#container").is(":visible"))
return false;
$("#container").toggle();
this.value = this.value == 'send me a message' ? 'contact' : 'send me a message';
});
$("#button2").on('click', function(e) {
$("#container").toggle();
$("#button").val('thank you');
});
/*----/-----contact let me know toggle*/
/*navigation background fade in fade out */
$(window).scroll(function () {
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}
});
$('.scroll').on('click', function (e) {
e.preventDefault()
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6- 12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h- 21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2- 11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8- 0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v- 1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7- 3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3- 3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li>
<div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>

Try the following define your whitenavbar css after the the css you have already defined for the element.It is working for header. If you want to apply to other element then change accordingly. if you change .nav background it would not be visible. Next option is to change .navigation
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar");
}else{
$("div.header").removeClass("whitenavbar");
}
});
css notice it is after .header{} css
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: teal;
}

I'm not sure but I think maybe the reason it isn't toggling is because of the else statement because it looks like when it's clicked you're adding those classes, and if it's not clicked you're removing them, but if it isn't clicked you aren't adding them in the first place (if that makes sense), and maybe this could be why it isn't toggling.
I'm getting an error when I try to run the JSFiddle (I could just be clicking the wrong thing) but if you want the nav bar to turn white when it's clicked you could just change the CSS, and because changing the CSS is a simpler solution it might have less of a chance of causing a problem with the toggle in the first place.
$(".nav").css("background", "white");