Hamburger menu + shrinking header - javascript

I was advised to repost my question, as I did not phrase it correctly previously.
I have a hamburger menu (see here: http://codepen.io/Dingerzat/pen/zKXARr ), that I want to work with a shrinking header (see here: http://codepen.io/Nickies/pen/ZYwJZM ). Putting the two codes directly together hasn't worked. The shrinking header and resizing logo ceases to function on scrolling.
I am not sure what is causing this. Any advice would be brilliant.
Posting the code my combined version below:
HTML
<header>
<div class="container clearfix">
<h1 id="logo">
LOGO
</h1>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="text">MENU</div>
</div>
</div>
</header><!-- /header -->
<nav>
<ul role="navigation" class="overlay hidden">
<li>WORK</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="contacts">
<address>someperson#somewhere.com</address>
</div>
<div class="bigtext">THIS IS PLACEHOLDER</div>
CSS
#import "compass/css3";
$bar-width: 50px;
$bar-height: 4px;
$bar-spacing: 15px;
body {
background: #000000;
font-family: Teko;
color: #ffffff;
}
.hamburger-menu {
position: fixed;
z-index: 1;
top: 45px;
left: 45px;
margin: auto;
width: $bar-width;
height: $bar-height + $bar-spacing*2;
cursor: pointer;
}
.text {
margin-left: 60px;
font-size: 18px;
letter-spacing: .05em;
color: #ffffff;
-webkit-transform: translateX(0);
transition: all 350ms ease-in-out;
vertical-align: middle;
position: relative;
z-index: 1;
}
.show .text {
opacity: 0;
transform: translateX( -10px );
}
.bar,
.bar:after,
.bar:before {
width: $bar-width;
height: $bar-height;
}
.bar {
position: relative;
z-index: 1;
transform: translateY($bar-spacing);
background: rgba(188, 49, 254, 1);
transition: all 0ms 300ms;
.show & {
background: rgba(255, 255, 255, 0);
}
}
.bar:before {
content: "";
position: fixed;
z-index: 1;
left: 0;
bottom: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
content: "";
position: fixed;
z-index: 1;
left: 0;
top: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.show .bar:after {
top: 0;
transform: rotate(45deg);
background: rgba(0, 0, 0, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.show .bar:before {
bottom: 0;
transform: rotate(-45deg);
background: rgba(0, 0, 0, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.overlay {
position: fixed;
border-style: solid;
border-width: 1em;
border-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #333;
background-color: #bc31fe;
}
nav ul, li {
margin: 0;
padding: 0;
font-family: Teko;
font-weight: bold;
font-size: 0.8em;
list-style: none;
text-align: center;
}
nav ul {
position: fixed;
top: 50%;
text-align: center;
&.hidden {
display: none;
}
a {
#include transition-duration(0.5s);
text-decoration: none;
color: white;
font-size: 3em;
line-height: 1.5;
}
}
nav ul li {
display: inline;
margin: 0 0.5rem;
}
.overlay .contacts {
position: fixed;
bottom: 37px;
left: 0;
right: 0;
padding-bottom: 15px;
text-align: center;
letter-spacing: .01em;
z-index: 2;
}
.contacts {
font-size: 16px;
line-height: 1.5;
color: #10131a;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.bigtext {
font-size: 50em;
}
header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #0683c9;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}
header h1#logo {
display: inline-block;
height: 150px;
line-height: 150px;
float: center;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav a:hover {
color: white;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
width: 150px;
height: 75px;
line-height: 75px;
font-size: 30px;
}
header.smaller nav a {
line-height: 75px;
}
#media all and (max-width: 660px) {
header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
}
header nav a {
line-height: 50px;
margin: 0 10px;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
}
header.smaller nav {
height: 35px;
}
header.smaller nav a {
line-height: 35px;
}
}
JS
( function () {
var $navUL = $( 'nav ul' );
$( '.hamburger-menu' ).on( 'click', function () {
$( this ).toggleClass( 'show' );
$navUL.toggleClass( 'hidden' );
} );
} )();
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();

Related

location.href is not working, can't acess to link location

I've created a "loading page" which should be the first page that users see when they connect. It's a simple page with a central bouton that people have to click. Once they do, they access to the rest of the website. All the pages including the loading page are in the same folder. Each page of the site has its own : "XXXXX.html".
So I've created a loader.html page, and implemented a javascript function, that is here :
let introBox = document.getElementById('intro');
introBox.addEventListener('click', function(){
document.location.href = "main.html";
});
#keyframes sectionAnimation{
0%{
transform:scale(1);
}
50%{
transform:scale(1.5);
}
100%{
transform: scale(1);
}
}
html {
border: 0;
margin: 0;
padding: 0;
width: 100%;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,*:before,*:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: #fff;
padding: 0;
margin: 0;
height: auto;
width: 100%;
background-repeat: no-repeat;
& img{
width: 50%;
}
}
.loaderbody{
background-image: url('../../Assets/R.png');
}
b {
position: relative;
display: block;
font-family: helvetica neue, helvetica, sans-serif;
line-height: 1.15em;
margin-top: -1.15em;
top: 2.3em;
font-size: 0.67em;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.75;
text-align: center;
}
b span {
font-size: 0.785em;
font-weight: 400;
opacity: 0.4;
}
#intro {
width: 200px;
margin:auto;
margin-top:25%;
animation: sectionAnimation 1.5s both infinite;
transform:scale(1);
}
.button {
display: inline-block;
text-decoration: none;
position: relative;
margin-top: 40px;
}
.button .bottom {
position: absolute;
left: 7px;
top: 7px;
width: 100%;
height: 100%;
background-color: #2acdc1;
display: block;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button .top {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 24px 34px 22px 34px;
border: 2px solid #04049d;
}
.button-dark .top {
border: 2px solid #fff;
}
.button .top .label {
font-family: sans-serif;
font-weight: 600;
color: #04049d;
font-size: 12px;
line-height: 110%;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button-dark .top .label {
color: #fff;
}
.button:hover .bottom {
left: 0;
top: 0;
background-color: #f3f3f3;
}
.button:hover .top .label {
color: #2acdc1;
}
.button-border {
position: absolute;
background-color: #2acdc1;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.button:hover .top .button-border-left,.button:hover .top .button-border-right {
height: calc(100% + 2px);
}
.button:hover .top .button-border-top,.button:hover .top .button-border-bottom {
width: calc(100% + 2px);
}
.button-border-left {
left: -2px;
bottom: -2px;
width: 2px;
height: 0;
}
.button-border-top {
left: -2px;
top: -2px;
width: 0;
height: 2px;
}
.button-border-right {
right: -2px;
top: -2px;
width: 2px;
height: 0;
}
.button-border-bottom {
right: -2px;
bottom: -2px;
width: 0;
height: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../Css/main copie.css">
<title>TP</title>
</head>
<body class="loaderbody">
<script type="text/javascript" src="../Js/loader.js"></script>
<section id="intro">
<div id="intro-content" class="center-content">
<div class="center-content-inner">
<div class="content-section content-section-margin">
<div class="content-section-grid clearfix">
<a href="#" class="button nav-link">
<div class="bottom"></div>
<div class="top">
<div class="label">Let's go !</div>
<div class="button-border button-border-left"></div>
<div class="button-border button-border-top"></div>
<div class="button-border button-border-right"></div>
<div class="button-border button-border-bottom"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
The element "intro" is my bouton on my loading page. However, when I click on it, I stay on the same URL. I've noticed that when I click on the box it automatically add a "#" at the end of my URL. So I assume the function is kinda working, and my click is detected.
It seems the problem is about the .location.href but I can't get it.
Thank you so much.

There is a missing slash /, your code should look like this:
introBox.addEventListener('click', function(){
document.location.href = "/main.html";
});
If you want to redirect outside your website, you have to add double slash //.
document.location.href = "//google.com";
EDIT: The actual error is on the tag with href="#", change it to "/main.html".
You can remove the listener if you will, it's no longer needed.

Why does my submenu overlap another child element?

Good day to all! I am facing an overlap issue when opening a submenu. If you open the first section and open the second submenu tab, the content that comes from 1 tab does not close and overlaps with second tab. How to make it so that when you click on the second title, the first one is hidden? Thanks for helping!
Code:
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
var menuItem = document.querySelector('.menu-item');
var itemOpened = document.querySelector('.item-opened');
menuToggle.addEventListener("click", function() {
nav.classList.toggle('open');
document.querySelectorAll('.menu-item.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
document.querySelectorAll('.menu-item.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
}, false);
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {text-decoration: none;color: #fff;}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size:18px;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position:absolute;
top: 10px;
left:50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {cursor: pointer;display: inline-block;position: absolute;left: 0;width: 32px;text-align: center;}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
left:-50px;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu{
display:none;
opacity:0;
position: fixed;
left:0;
top: 0;
right: 40%;
bottom:0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {height: 10px;width: 10px;}
.item-opened ~ .submenu{
opacity:1;
display:inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
z-index: 0;
}
.submenu li{
text-align: right;
font-size: 16px;
padding:0;
}
.submenu .submenu li{
text-align: right;
font-size: 18px;
padding:0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100%!important;
}
.position-relative {
position: relative!important;
}
.align-items-center {
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.justify-content-end {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Lorem ipsum title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Lorem ipsum dolor
<span class="chevron"></span>
<ul class="submenu">
<li>Sub sub menu</li>
<li>Sub sub menu</li>
</ul>
</li>
<li>FIRST SUBMENU</li>
<li>FIRST SUBMENU</li>
<li>FIRST SUBMENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 2
<span class="chevron"></span>
<ul class="submenu">
<li> SECOND SUBMENU</li>
<li> SECOND SUBMENU</li>
<li> SECOND SUBMENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 3
<span class="chevron"></span>
<ul class="submenu">
<li> THIRD SUBMENU</li>
<li> THIRD SUBMENU</li>
<li> THIRD SUBMENU</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

Your first issue is to add an event handler for each click on menuToggle:
menuToggle.addEventListener("click", function () {
..........
item.addEventListener('click', function (event) {
Second, if you need to manage the third level it is reqiured to add a new event handler for the third level:
document.querySelectorAll('.submenu .chevron').forEach(function (item) {
item.addEventListener('click', function (event) {
document.querySelectorAll('.submenu .item-opened').forEach(function (openitem) {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
}, false);
The snippet:
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
var menuItem = document.querySelector('.menu-item');
var itemOpened = document.querySelector('.item-opened');
menuToggle.addEventListener("click", function () {
nav.classList.toggle('open');
document.querySelectorAll('.menu-item.item-opened').forEach(function (openitem) {
openitem.classList.remove('item-opened');
});
});
document.querySelectorAll('.menu-item > .chevron').forEach(function (item) {
item.addEventListener('click', function (event) {
document.querySelectorAll('.menu-item .item-opened').forEach(function (openitem) {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
}, false);
document.querySelectorAll('.submenu .chevron').forEach(function (item) {
item.addEventListener('click', function (event) {
document.querySelectorAll('.submenu .item-opened').forEach(function (openitem) {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
}, false);
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {
text-decoration: none;
color: #fff;
}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size: 18px;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position: absolute;
top: 10px;
left: 50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;
background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;
background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {
cursor: pointer;
display: inline-block;
position: absolute;
left: 0;
width: 32px;
text-align: center;
}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
left: -50px;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu {
display: none;
opacity: 0;
position: fixed;
left: 0;
top: 0;
right: 40%;
bottom: 0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {
height: 10px;
width: 10px;
}
.item-opened ~ .submenu {
opacity: 1;
display: inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
z-index: 0;
}
.submenu li {
text-align: right;
font-size: 16px;
padding: 0;
}
.submenu .submenu li {
text-align: right;
font-size: 18px;
padding: 0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100% !important;
}
.position-relative {
position: relative !important;
}
.align-items-center {
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.justify-content-end {
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.d-flex {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Lorem ipsum title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Lorem ipsum dolor
<span class="chevron"></span>
<ul class="submenu">
<li>Sub sub menu</li>
<li>Sub sub menu</li>
</ul>
</li>
<li>FIRST MENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 2
<span class="chevron"></span>
<ul class="submenu">
<li>2222 Lorem ipsum dolor</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 3
<span class="chevron"></span>
<ul class="submenu">
<li>333333 Lorem ipsum dolor</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

You missed a space in this selector document.querySelectorAll('.menu-item.item-opened') because .item-opened is a child of .menu-item so they need a space between them. When the classes are next to each other, it means that the same component has the two classes at the same time.
Check out the snipped code
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
var menuItem = document.querySelector('.menu-item');
var itemOpened = document.querySelector('.item-opened');
menuToggle.addEventListener("click", function() {
nav.classList.toggle('open');
document.querySelectorAll('.menu-item.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
document.querySelectorAll('.menu-item .item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
}, false);
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {text-decoration: none;color: #fff;}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size:18px;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position:absolute;
top: 10px;
left:50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {cursor: pointer;display: inline-block;position: absolute;left: 0;width: 32px;text-align: center;}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
left:-50px;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu{
display:none;
opacity:0;
position: fixed;
left:0;
top: 0;
right: 40%;
bottom:0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {height: 10px;width: 10px;}
.item-opened ~ .submenu{
opacity:1;
display:inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
z-index: 0;
}
.submenu li{
text-align: right;
font-size: 16px;
padding:0;
}
.submenu .submenu li{
text-align: right;
font-size: 18px;
padding:0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100%!important;
}
.position-relative {
position: relative!important;
}
.align-items-center {
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.justify-content-end {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Lorem ipsum title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Lorem ipsum dolor
<span class="chevron"></span>
<ul class="submenu">
<li>Sub sub menu</li>
<li>Sub sub menu</li>
</ul>
</li>
<li>FIRST MENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 2
<span class="chevron"></span>
<ul class="submenu">
<li>2222 Lorem ipsum dolor</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 3
<span class="chevron"></span>
<ul class="submenu">
<li>333333 Lorem ipsum dolor</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

I see that question already has answer, just guess my version also could be useful for someone
Open/close function below gives opportunity to work with different numbers of submenu's levels and don't write new listener for each new level:
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
item.closest('ul').querySelectorAll('.chevron.item-opened').forEach(openItem => {
if (item == openItem) return false; // skip current item to toggle it after
openItem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
item.closest('ul') allow work with only current and lower levels of menu, e.g., if you click on second level menu it will close second and third levels but keep first level opened.
I changed your code a bit to show how it works with more levels of submenus:
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
menuToggle.addEventListener("click", function() {
nav.classList.toggle('open');
document.querySelectorAll('.chevron.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
}, false);
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
item.closest('ul').querySelectorAll('.chevron.item-opened').forEach(openitem => {
if (item == openitem) return false;
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {text-decoration: none;color: #fff;}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size:18px;
line-height: 1.5;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position:absolute;
top: 10px;
left:50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
display: flex;
flex-direction: row-reverse;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {
cursor: pointer;
display: inline-block;
position: relative;
width: 32px;
text-align: center;
}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu{
display:none;
opacity:0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {height: 10px;width: 10px;}
.item-opened ~ .submenu{
opacity:1;
z-index: 0;
margin-right: 60px;
display: block;
}
.submenu li{
text-align: right;
font-size: 16px;
padding:0;
display: flex;
flex-direction: row-reverse;
}
.submenu .submenu li{
text-align: right;
font-size: 18px;
padding:0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100%!important;
}
.position-relative {
position: relative!important;
}
.align-items-center {
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.justify-content-end {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Title 1-1
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-1-1</li>
<li>Title 1-1-2</li>
</ul>
</li>
<li>
Title 1-2
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-2-1</li>
<li>
Title 1-2-2
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-2-2-1</li>
<li>Title 1-2-2-2</li>
</ul>
</li>
<li>
Title 1-2-3
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-2-3-1</li>
<li>
Title 1-2-3-2
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-2-3-2-1</li>
<li>Title 1-2-3-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Title 1-3</li>
</ul>
</li>
<li class="menu-item">
Title 2
<span class="chevron"></span>
<ul class="submenu">
<li>Title 2-1</li>
</ul>
</li>
<li class="menu-item">
Title 3
<span class="chevron"></span>
<ul class="submenu">
<li>Title 3-1</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

You are showing the element with classname of chevron, but then hiding elements with classname of menu-item. The right fix here would be just using the same classname.
Full Working Demo at JSBin
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
var menuItem = document.querySelector('.menu-item');
var itemOpened = document.querySelector('.item-opened');
menuToggle.addEventListener("click", function() {
nav.classList.toggle('open');
document.querySelectorAll('.menu-item.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
document.querySelectorAll('.chevron.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
}, false);
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {text-decoration: none;color: #fff;}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size:18px;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position:absolute;
top: 10px;
left:50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {cursor: pointer;display: inline-block;position: absolute;left: 0;width: 32px;text-align: center;}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
left:-50px;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu{
display:none;
opacity:0;
position: fixed;
left:0;
top: 0;
right: 40%;
bottom:0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {height: 10px;width: 10px;}
.item-opened ~ .submenu{
opacity:1;
display:inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
z-index: 0;
}
.submenu li{
text-align: right;
font-size: 16px;
padding:0;
}
.submenu .submenu li{
text-align: right;
font-size: 18px;
padding:0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100%!important;
}
.position-relative {
position: relative!important;
}
.align-items-center {
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.justify-content-end {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Lorem ipsum title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Lorem ipsum dolor
<span class="chevron"></span>
<ul class="submenu">
<li>Sub sub menu</li>
<li>Sub sub menu</li>
</ul>
</li>
<li>FIRST MENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 2
<span class="chevron"></span>
<ul class="submenu">
<li>2222 Lorem ipsum dolor</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 3
<span class="chevron"></span>
<ul class="submenu">
<li>333333 Lorem ipsum dolor</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

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.

Hamburger menu with shrinking header

I want to merge a menu I have been working on with a shrinking header (though i want the hamburger to stay the same size).
I have tried directly merging piece of I found of a shrinking header with my hamburger menu, though there are conflicts where the overlay goes behind the header. Also can't get the logo text to be central, or get the bar itself to resize.
Here is my attempt: http://codepen.io/Dingerzat/pen/XjQQWZ
And here is the previous and working version of the menu: http://codepen.io/Dingerzat/pen/zKXARr
Any help would be great.
HTML
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<header>
<div class="container clearfix">
<h1 id="logo">
LOGO
</h1>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="text">MENU</div>
</div>
</div>
</header><!-- /header -->
<nav>
<ul role="navigation" class="overlay hidden">
<li>WORK</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="contacts">
<address>someperson#somewhere.com</address>
</div>
<div class="bigtext">THIS IS PLACEHOLDER</div>
CSS
#import "compass/css3";
$bar-width: 50px;
$bar-height: 4px;
$bar-spacing: 15px;
body {
background: #000000;
font-family: Teko;
color: #ffffff;
}
.hamburger-menu {
position: fixed;
z-index: 1;
top: 45px;
left: 45px;
margin: auto;
width: $bar-width;
height: $bar-height + $bar-spacing*2;
cursor: pointer;
}
.text {
margin-left: 60px;
font-size: 18px;
letter-spacing: .05em;
color: #ffffff;
-webkit-transform: translateX(0);
transition: all 350ms ease-in-out;
vertical-align: middle;
position: relative;
z-index: 1;
}
.show .text {
opacity: 0;
transform: translateX( -10px );
}
.bar,
.bar:after,
.bar:before {
width: $bar-width;
height: $bar-height;
}
.bar {
position: relative;
z-index: 1;
transform: translateY($bar-spacing);
background: rgba(188, 49, 254, 1);
transition: all 0ms 300ms;
.show & {
background: rgba(255, 255, 255, 0);
}
}
.bar:before {
content: "";
position: fixed;
z-index: 1;
left: 0;
bottom: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
content: "";
position: fixed;
z-index: 1;
left: 0;
top: $bar-spacing;
background: rgba(188, 49, 254, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.show .bar:after {
top: 0;
transform: rotate(45deg);
background: rgba(0, 0, 0, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.show .bar:before {
bottom: 0;
transform: rotate(-45deg);
background: rgba(0, 0, 0, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
.overlay {
position: fixed;
border-style: solid;
border-width: 1em;
border-color: black;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #333;
background-color: #bc31fe;
}
nav ul, li {
margin: 0;
padding: 0;
font-family: Teko;
font-weight: bold;
font-size: 0.8em;
list-style: none;
text-align: center;
}
nav ul {
position: fixed;
top: 50%;
text-align: center;
&.hidden {
display: none;
}
a {
#include transition-duration(0.5s);
text-decoration: none;
color: white;
font-size: 3em;
line-height: 1.5;
}
}
nav ul li {
display: inline;
margin: 0 0.5rem;
}
.overlay .contacts {
position: fixed;
bottom: 37px;
left: 0;
right: 0;
padding-bottom: 15px;
text-align: center;
letter-spacing: .01em;
z-index: 2;
}
.contacts {
font-size: 16px;
line-height: 1.5;
color: #10131a;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.bigtext {
font-size: 50em;
}
header {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #0683c9;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}
header h1#logo {
display: inline-block;
height: 150px;
line-height: 150px;
float: center;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav a:hover {
color: white;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
width: 150px;
height: 75px;
line-height: 75px;
font-size: 30px;
}
header.smaller nav a {
line-height: 75px;
}
#media all and (max-width: 660px) {
header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
}
header nav a {
line-height: 50px;
margin: 0 10px;
}
header.smaller {
height: 75px;
}
header.smaller h1#logo {
height: 40px;
line-height: 40px;
font-size: 30px;
}
header.smaller nav {
height: 35px;
}
header.smaller nav a {
line-height: 35px;
}
}
JS
( function () {
var $navUL = $( 'nav ul' );
$( '.hamburger-menu' ).on( 'click', function () {
$( this ).toggleClass( 'show' );
$navUL.toggleClass( 'hidden' );
} );
} )();
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();

Text Underline Animation Left to Right

The Navigation Links on hover ease in a underline from left to right and ease out right to left. I would like to make it so that both the ease in & ease out go from left to right. How can I adjust the ease out?
http://jsfiddle.net/2tycjc82/
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.4c6.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.6v34H56.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,120L151.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.8C155.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.3C154.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>
CSS:
/*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*/
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();
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 */
});

Make some changes to your css:
.navlist:after {
...
float: right; /* Add this line */
}
.navlist:hover:after {
...
float: left; /* Add this line */
}
Demo: http://jsfiddle.net/2tycjc82/2/
But as I commented. There's a not-so-nice result when user hover in then immediately hover out.

Categories