Hamburger menu with shrinking header - javascript

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

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.

Close the overlay fullscreen menu when anchor link is clicked

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

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

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>

Text appearing under meniu page CSS HTML

I created a HTML Website and I have a problem with it, i got a menu from the Internet and edited the website and now I realized that the menu items appear under the menu background.
I got the website online on andrei-marin.com you can check it out.
One thing i discovered is that if you put 'display: flex' in the header, the meniu works perfect but everything is out of the place..
I will add the code below.
// function to open/close nav
function toggleNav(){
// if nav is open, close it
if($("nav").is(":visible")){
$("nav").fadeOut();
$("button").removeClass("menu");
}
// if nav is closed, open it
else{
$("button").addClass("menu");
$("nav").fadeIn().css('display', 'flex');
}
}
// when clicking + or ☰ button
$("button").click(function(){
// when clicking ☰ button, open nav
if($("header").hasClass("open")){
toggleNav();
}
// when clicking + button, open header
else{
$("header").addClass("open");
}
});
// close nav
$("#nav-close").click(function(){
toggleNav();
});
// scroll to sections
$("nav li").click(function(){
// get index of clicked li and select according section
var index = $(this).index();
var target = $("content section").eq(index);
toggleNav();
$('html,body').delay(300).animate({
scrollTop: target.offset().top
}, 500);
});
/* GLOBAL STYLES */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
background-color: lightgray;
}
.main_image{
padding-top:50%;
background-image: url('bg.jpg');
height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 0em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter{
margin-top:25%;
font-size: 20px;
}
.typewriter h1 {
color: #fff;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white }
}
header {
width: 100%;
height: 100%;
top: 0;
left: 0;
flex-direction: column;
justify-content: center;
align-items: center;
}
header button {
position: relative;
z-index: 10;
}
header button {
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
bottom: 100px;
left: calc(50% - 60px);
width: 120px;
height: 50px;
border: 0;
box-shadow: 2px 1px 20px 0 rgba(0, 0, 0, 0.5);
border-radius: 10px;
cursor: pointer;
background: #fff;
font-size: 1em;
color: #09203f;
transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
overflow: hidden;
}
header button:hover {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
}
header button:focus {
outline: 0;
}
header button:before, header button:after {
font-family: "Font Awesome 5 Free";
transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
top: 17px;
position: absolute;
}
header button:before {
content: "\f067";
opacity: 1;
left: 53px;
}
header button:after {
content: "\f0c9";
opacity: 0;
left: 0;
}
header.open button {
position: fixed;
left: 40px;
bottom: 40px;
width: 50px;
border-radius: 50%;
}
header.open button:before {
opacity: 0;
left: 100%;
}
header.open button:after {
opacity: 1;
left: 18px;
}
header.open button.menu {
width: 100%;
height: 100%;
bottom: 0;
left: 0;
border-radius: 0;
}
header.open button.menu:after {
left: -100%;
}
content section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 1em;
letter-spacing: 2pt;
color: #fff;
}
nav {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
nav ul {
list-style: none;
}
nav ul li {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-transform: uppercase;
line-height: 2;
letter-spacing: 1pt;
font-size: 2em;
color: #09203f;
animation: fadeDown .5s forwards;
opacity: 0;
cursor: pointer;
transform: translateY(-20px);
transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
nav ul li:hover {
text-shadow: 2px 1px 40px rgba(0, 0, 0, 0.5);
opacity: .8;
}
nav ul li:nth-child(1) {
animation-delay: 0.8s;
}
nav ul li:nth-child(2) {
animation-delay: 0.9s;
}
nav ul li:nth-child(3) {
animation-delay: 1s;
}
nav #nav-close {
position: fixed;
top: 40px;
right: 40px;
font-size: 1.5em;
cursor: pointer;
animation: fadeDown .5s forwards;
animation-delay: 1.1s;
opacity: 0;
color: #09203f;
transform: translateY(-20px);
}
#keyframes fadeDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Andrei Marin</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
<link rel="stylesheet" href="master.css">
</head>
<body>
<header>
<div class="main_image">
<div class="typewriter">
<h1>Andrei Marin</h1>
</div>
<button></button>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="nav-close"><i class="fas fa-times"></i></div>
</nav>
<content>
<section>Home</section>
<section>About</section>
<section>Projects</section>
<section>Contact</section>
</content>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="master.js"></script>
</body>
</html>

Try removing your z-index: 10; in header button{ (line 59) ?

Hamburger menu + shrinking header

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

Categories