We Keep Coding

I've added a Lightbox jquery for my website, but I want to remove a blue border that appears everytime

I've added a LightBox correctly, but there's something wrong when I click a photo, because there's like a blue border in Google chrome and then another type of border in Internet Explorer that I don't want to see:
https://imgur.com/9dQngUM
How can I remove this?
I've used this lightbox https://lokeshdhakar.com/projects/lightbox2/
Thank you! :D
.lb-loader, .lightbox {
text-align: center;
line-height: 0;
position: absolute;
left: 0
}
body.lb-disable-scrolling {
overflow: hidden
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
filter: alpha(Opacity=80);
opacity: .8;
display: none
}
.lightbox {
width: 100%;
z-index: 10000;
font-weight: 400;
outline: 0
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
border: 4px solid #fff
}
.lightbox a img {
border: none
}
.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
background-color: #fff
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both
}
.lb-loader {
top: 43%;
height: 25%;
width: 100%
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10
}
.lb-container > .nav {
left: 0
}
.lb-nav a {
outline: 0;
background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}
.lb-next, .lb-prev {
height: 100%;
cursor: pointer;
display: block
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-prev:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
transition: opacity .6s
}
.lb-nav a.lb-next:hover {
filter: alpha(Opacity=100);
opacity: 1
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both
}
.lb-data {
padding: 0 4px;
color: #ccc
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: 700;
line-height: 1em
}
.lb-data .lb-caption a {
color: #4ae
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: 0;
filter: alpha(Opacity=70);
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: alpha(Opacity=100);
opacity: 1
}

Without seeing "the full picture" i.e. your code; you could try this:
.lightbox * { border: none !important; }
This assumes it really is a border problem and not some background image or something of that nature.

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>

underline incorrect width

The Navigation Links have an animated underline which in screen size <555px shows as being 100% page width when they should only be showing the width of the text. Changing the display to inline-block changes the width but I want the links to display on top of each other not side by side?
http://jsfiddle.net/2tycjc82/
/*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();
if($("div.header").hasClass("whitenavbar") == false){
$("div.header").addClass("whitenavbar bg navup ");
}else{
$("div.header").removeClass("whitenavbar bg navup");
}
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*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 */
});
/*navlist*/
.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;
transition: width .5s ease, background-color .5s ease;
}
/*----/----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 {
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;
}
/*----/----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;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left:0;
top: 55px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px 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: 1px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
overflow: hidden;
}
#navpromo ul {
margin: 0;
}
.want{
display: inline-block;
text-align: center;
float: left;
padding-right:10px;
margin-bottom: 0;
}
.check{
text-align: center;
display:inline-block;
}
#media only screen and (max-width: 555px) {
.want{
display: block;
text-align: center;
float: none;
padding-right: 0px;
margin-bottom: 0;
}
.check{
text-align: center;
display: block;
}
}
.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;
margin-top: 20px;
margin-bottom: 20px;
}
.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;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
<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>

You can move the animation to the a tags and then use the .navlist items to separate each onto its own line:
Take the style attributes off the links and define that in CSS, without the width definition.
.navlist a {
display: inline-block;
}
Take the animation off of .navlist and put it on the a inside it:
.navlist a:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist a:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
Make the .navlist items block so that each link appears on its own line:
.navlist {
display: block;
}
http://jsfiddle.net/2tycjc82/6/

Add width to ul and center it, and remove display: block from li:
http://jsfiddle.net/2tycjc82/7/

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

Overlay nav doesn't cover all elements on the page

I'm having a bit of trouble getting the overlay nav to cover all the elements within the page. When I create a container or row for an individual section within the page the overlay seems to not overlay.
Here's the code and a link to codepen http://codepen.io/anon/pen/aOGYdy
HTML
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav id="topNav" class="overlay-menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section id="home">
<div class="container content-section">
<div class="col-md-12 intro-text no-padding">
<div class="col-md-5 intro-heading">Hello, I'm <div class="intro-heading blue">Tom<font color="#333">.</font>
</div>
<div ng-app="typeApp">
<section ng-controller="typeController" class="content">
<h2 ng-class="{typing: isTyping}">I'm {{ something }}<span class="cursor"> </span></h2>
</section>
</div>
</div>
<div class="col-md-7">
<img src="http://i.imgur.com/GRLosqO.png" class="img-responsive align="right" " alt="">
</div>
</div>
</div>
</section>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="contact">
<p>Contact</p>
</section>
CSS
html, body {
height: 100%;
margin: 0;
font-size: 21px;
}
/* TYPE */
h1 {
font-size: 2.7em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -2px;
color: #222;
margin-bottom: .3em;
}
h2 {
font-weight: 200;
-webkit-text-stroke: 1px rgba(0,0,0,0.1);
}
h2 span.cursor {
display: inline-block;
background: #333;
margin-left: 1px;
width: .05em;
animation: blink 2s linear 0s infinite;
}
h2.typing span.cursor {
animation: none;
}
#keyframes blink {
0% { background: #FFF }
47% { background: #FFF }
50% { background: #333 }
97% { background: #333 }
100% { background: #FFF }
}
/* SECTIONS */
html, body {
height: 100%;
margin: 0;
padding: 0;
margin:0;
}
section {
height: 100%;
width: 100%;
display: table;
}
#home {
background-color: #ffffff;
}
#portfolio {
background-color: #1abc9c;
}
#about {
background-color: #e67e22;
}
#contact {
background-color: #22a7f0;
}
p {
display: table-cell;
text-align: center;
vertical-align: middle;
font: 700 3em/1 'Open Sans', sans-serif;
text-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.2);
color: #fff;
}
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #35B0FC;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
-webkit-transition: .35s ease;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
.button_container {
position: fixed;
top: 3%;
right: 3%;
height: 25px;
width: 35px;
cursor: pointer;
z-index: 100;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
-webkit-transform: translateY(11px) translateX(0) rotate(45deg);
-ms-transform: translateY(11px) translateX(0) rotate(45deg);
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-11px) translateX(0) rotate(-45deg);
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: black;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlay {
position: fixed !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
/*
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: relative;
}
*/
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
height: 3px;
background: #FFF;
-webkit-transition: .35s;
transition: .35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
JavaScript
//nav toggle
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$("nav li").click(function() {
$('#overlay').toggleClass('open');
$('#toggle').toggleClass('active');
});
//pages size
(function () {
var px, sections, speed, wait;
sections = document.getElementsByTagName('section');
px = 100;
speed = 0.5;
wait = 2000;
$(window).on('scroll', function () {
clearTimeout($.data(this, 'timer'));
return $.data(this, 'timer', setTimeout(function () {
var i, results, sectionY, time, windowY;
windowY = $(window).scrollTop();
i = sections.length - 1;
results = [];
while (i >= 0) {
if (sectionY - px < windowY && windowY < sectionY + px) {
time = Math.abs(windowY - sectionY) / speed;
$(document.body).animate({ scrollTop: sectionY }, time, 'swing');
}
results.push(i--);
}
}, wait));
});
}.call(this));
//slide
// Cache selectors
var lastId,
topMenu = $("#topNav"),
topMenuHeight = topMenu.outerHeight(),
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
o = href === "#" ? 0 : $(href).offset().top-topMenuHeight+15;
$('html, body').stop().animate({
scrollTop: o
}, 800);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});

Just add a z-index to .overlay
http://codepen.io/anon/pen/oXdqYy
.overlay {
position: fixed !important;
background: #22a7f0;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
z-index: 99;
}