Delay transition effects until after nav closes - javascript

When I close my responsive nav menu the text changes font-size before it closes and I would like to have it slide in before the font-size changes. It is constructed as such;
<div class="top-bar">
<button class="top-bar__nav-toggle hamburger" id="top-nav-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="top-bar__nav collapsed" id="top-bar__nav">
<ul class="top-bar__nav-list nav-ul">
<li>
<a class="navlink" href="#">Home</a>
</li>
<li>
<a class="navlink" href="#Portfolio">Work</a>
</li>
<li>
<a class="navlink" href="#About">About</a>
</li>
<li>
<a class="navlink" href="#Contact">Contact</a>
</li>
</ul>
</nav>
</div>
Styled like this;
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
}
and animated through this code;
function openCloseNav() {
var navToggle = document.querySelector("#top-nav-toggle");
if (!navToggle.classList.contains("closed")) {
navToggle.classList.add("closed");
document.querySelector("#top-bar__nav").classList.remove("collapsed");
document.querySelector("html").addEventListener("click", watchNavClose);
document.body.style.overflowY = 'hidden';
} else {
document.querySelector("#top-bar__nav").classList.add("collapsed");
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
}
}
document.addEventListener('keydown', e => {
if ( e.keyCode === 27 ) {
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
document.querySelector("#top-bar__nav").classList.add("collapsed");
}
})
navToggle.addEventListener("click", openCloseNav);
}
})
();
I am new to this and am not even sure how to phrase the search to find this answer. Thanks for any help!

Related

transition between expanding elements

I have another question.
I hope it does not count as dumb question again. most beginner questions seem to been seen as dumb.
Anyway I am trying to have the transition between clicking cards more smooth.
Currently you can click on a card and it expands down and it is smooth when you click on the same card, but if you click on one card then a diferent one it is not smoth expanding the elements.
Mostly when the cards are next to each other in full screen
var $cell = $(".card");
//open and close card when clicked on card
$cell.find(".js-expander").click(function (e) {
e.stopImmediatePropagation();
var $thisCell = $(this).closest(".card");
if ($thisCell.hasClass("is-collapsed")) {
$cell.not($thisCell).removeClass("is-expanded").addClass("is-collapsed");
//$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
$thisCell.removeClass("is-collapsed").addClass("is-expanded");
// if ($cell.not($thisCell).hasClass("is-inactive")) {
// //do nothing
// } else {
// //$cell.not($thisCell).addClass('is-inactive');
// }
} else {
$thisCell.removeClass("is-expanded").addClass("is-collapsed");
$cell.not($thisCell).removeClass("is-inactive");
}
});
$cell.find(".card__expander").click(function (e) {
e.stopImmediatePropagation();
});
//close card when click on cross
$cell.find(".js-collapser").click(function () {
var $thisCell = $(this).closest(".card");
$thisCell.removeClass("is-expanded").addClass("is-collapsed");
$cell.not($thisCell).removeClass("is-inactive");
});
* {
box-sizing: border-box;
}
body {
background: #eceef1;
font-family: "Slabo 27px", serif;
color: #333a45;
}
.wrapper {
margin: 5em auto;
max-width: 1000px;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
}
.header {
padding: 30px 30px 0;
text-align: center;
}
.header__title {
margin: 0;
text-transform: uppercase;
font-size: 2.5em;
font-weight: 500;
line-height: 1.1;
}
.header__subtitle {
margin: 0;
font-size: 1.5em;
color: #949fb0;
font-family: "Yesteryear", cursive;
font-weight: 500;
line-height: 1.1;
}
.cards {
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.card {
margin: 15px;
width: calc((100% / 3) - 30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#media screen and (max-width: 991px) {
.card {
width: calc((100% / 2) - 30px);
}
}
#media screen and (max-width: 767px) {
.card {
width: 100%;
}
}
.card:hover .card__inner {
background-color: #1abc9c;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.card__inner {
width: 100%;
padding: 30px;
position: relative;
cursor: pointer;
background-color: #949fb0;
color: #eceef1;
font-size: 1.5em;
text-transform: uppercase;
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.card__inner:after {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card__inner .fa {
width: 100%;
margin-top: 0.25em;
}
.card__expander {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #333a45;
width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-transform: uppercase;
color: #eceef1;
font-size: 1.5em;
}
.card__expander .fa {
font-size: 0.75em;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.card__expander .fa:hover {
opacity: 0.9;
}
.card.is-collapsed .card__inner:after {
content: "";
opacity: 0;
}
.card.is-collapsed .card__expander {
max-height: 0;
min-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
}
.card.is-expanded .card__inner {
background-color: #1abc9c;
}
.card.is-expanded .card__inner:after {
content: "";
opacity: 1;
display: block;
height: 0;
width: 0;
position: absolute;
bottom: -30px;
left: calc(50% - 15px);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #333a45;
}
.card.is-expanded .card__inner .fa:before {
content: "\f115";
}
.card.is-expanded .card__expander {
max-height: 1000px;
min-height: 200px;
overflow: visible;
margin-top: 30px;
opacity: 1;
}
.card.is-expanded:hover .card__inner {
-webkit-transform: scale(1);
transform: scale(1);
}
.card.is-inactive .card__inner {
pointer-events: none;
opacity: 0.5;
}
.card.is-inactive:hover .card__inner {
background-color: #949fb0;
-webkit-transform: scale(1);
transform: scale(1);
}
#media screen and (min-width: 992px) {
.card:nth-of-type(3n + 2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(3n + 3) .card__expander {
margin-left: calc(-200% - 60px);
}
.card:nth-of-type(3n + 4) {
clear: left;
}
.card__expander {
width: calc(300% + 60px);
}
}
#media screen and (min-width: 768px) and (max-width: 991px) {
.card:nth-of-type(2n + 2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(2n + 3) {
clear: left;
}
.card__expander {
width: calc(200% + 30px);
}
}
a {
color: #35a785;
text-decoration: none;
}
/* --------------------------------
--------------------
Main components
-------------------------------- */
header {
height: 200px;
line-height: 200px;
text-align: center;
background-color: #5e6e8d;
color: #fff;
}
header h1 {
font-size: 20px;
font-size: 1.25rem;
}
/*
.cd-popup-trigger {
display: block;
width: 170px;
height: 50px;
line-height: 50px;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 50em;
background: #35a785;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
/* --------------------------------
xpopup
-------------------------------- */
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
z-index: 1;
}
.cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
position: relative;
width: 100%;
height: 100%;
background: #fff;
border-radius: 0.25em 0.25em 0.4em 0.4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translatex(-400px);
-moz-transform: translatex(-400px);
-ms-transform: translatex(-400px);
-o-transform: translatex(-400px);
transform: translatex(-400px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.cd-popup-container p {
padding: 0px;
margin: 0px;
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
content: "";
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.cd-popup-container .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.is-visible .cd-popup-container {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrappeer">
<div class="cards">
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 1
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 2
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 3
</div>
</div>
</div>
</div>

A little timeout value will help.
First I check to see if there are any expanded and set a timeout MS number:
let timeout = $('.is-expanded').length > 0 ? 200 : 0
If there is something expanded, the timeout will be 200 miliseconds.
Then we set the expanding element in a timeout, which will be zero if there is nothing currently expanded:
setTimeout(() => {
$thisCell.removeClass("is-collapsed").addClass("is-expanded");
}, timeout)
You can adjust the timeout value
var $cell = $(".card");
//open and close card when clicked on card
$cell.find(".js-expander").click(function(e) {
e.stopImmediatePropagation();
var $thisCell = $(this).closest(".card");
if ($thisCell.hasClass("is-collapsed")) {
let timeout = $('.is-expanded').length > 0 ? 200 : 0
$cell.not($thisCell).removeClass("is-expanded").addClass("is-collapsed");
//$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
setTimeout(() => {
$thisCell.removeClass("is-collapsed").addClass("is-expanded");
}, timeout)
// if ($cell.not($thisCell).hasClass("is-inactive")) {
// //do nothing
// } else {
// //$cell.not($thisCell).addClass('is-inactive');
// }
} else {
$thisCell.removeClass("is-expanded").addClass("is-collapsed");
$cell.not($thisCell).removeClass("is-inactive");
}
});
$cell.find(".card__expander").click(function(e) {
e.stopImmediatePropagation();
});
//close card when click on cross
$cell.find(".js-collapser").click(function() {
var $thisCell = $(this).closest(".card");
$thisCell.removeClass("is-expanded").addClass("is-collapsed");
$cell.not($thisCell).removeClass("is-inactive");
});
* {
box-sizing: border-box;
}
body {
background: #eceef1;
font-family: "Slabo 27px", serif;
color: #333a45;
}
.wrapper {
margin: 5em auto;
max-width: 1000px;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
}
.header {
padding: 30px 30px 0;
text-align: center;
}
.header__title {
margin: 0;
text-transform: uppercase;
font-size: 2.5em;
font-weight: 500;
line-height: 1.1;
}
.header__subtitle {
margin: 0;
font-size: 1.5em;
color: #949fb0;
font-family: "Yesteryear", cursive;
font-weight: 500;
line-height: 1.1;
}
.cards {
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.card {
margin: 15px;
width: calc((100% / 3) - 30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#media screen and (max-width: 991px) {
.card {
width: calc((100% / 2) - 30px);
}
}
#media screen and (max-width: 767px) {
.card {
width: 100%;
}
}
.card:hover .card__inner {
background-color: #1abc9c;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.card__inner {
width: 100%;
padding: 30px;
position: relative;
cursor: pointer;
background-color: #949fb0;
color: #eceef1;
font-size: 1.5em;
text-transform: uppercase;
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.card__inner:after {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.card__inner .fa {
width: 100%;
margin-top: 0.25em;
}
.card__expander {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #333a45;
width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-transform: uppercase;
color: #eceef1;
font-size: 1.5em;
}
.card__expander .fa {
font-size: 0.75em;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.card__expander .fa:hover {
opacity: 0.9;
}
.card.is-collapsed .card__inner:after {
content: "";
opacity: 0;
}
.card.is-collapsed .card__expander {
max-height: 0;
min-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
}
.card.is-expanded .card__inner {
background-color: #1abc9c;
}
.card.is-expanded .card__inner:after {
content: "";
opacity: 1;
display: block;
height: 0;
width: 0;
position: absolute;
bottom: -30px;
left: calc(50% - 15px);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #333a45;
}
.card.is-expanded .card__inner .fa:before {
content: "\f115";
}
.card.is-expanded .card__expander {
max-height: 1000px;
min-height: 200px;
overflow: visible;
margin-top: 30px;
opacity: 1;
}
.card.is-expanded:hover .card__inner {
-webkit-transform: scale(1);
transform: scale(1);
}
.card.is-inactive .card__inner {
pointer-events: none;
opacity: 0.5;
}
.card.is-inactive:hover .card__inner {
background-color: #949fb0;
-webkit-transform: scale(1);
transform: scale(1);
}
#media screen and (min-width: 992px) {
.card:nth-of-type(3n + 2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(3n + 3) .card__expander {
margin-left: calc(-200% - 60px);
}
.card:nth-of-type(3n + 4) {
clear: left;
}
.card__expander {
width: calc(300% + 60px);
}
}
#media screen and (min-width: 768px) and (max-width: 991px) {
.card:nth-of-type(2n + 2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(2n + 3) {
clear: left;
}
.card__expander {
width: calc(200% + 30px);
}
}
a {
color: #35a785;
text-decoration: none;
}
/* --------------------------------
--------------------
Main components
-------------------------------- */
header {
height: 200px;
line-height: 200px;
text-align: center;
background-color: #5e6e8d;
color: #fff;
}
header h1 {
font-size: 20px;
font-size: 1.25rem;
}
/*
.cd-popup-trigger {
display: block;
width: 170px;
height: 50px;
line-height: 50px;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 50em;
background: #35a785;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
/* --------------------------------
xpopup
-------------------------------- */
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
z-index: 1;
}
.cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
position: relative;
width: 100%;
height: 100%;
background: #fff;
border-radius: 0.25em 0.25em 0.4em 0.4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translatex(-400px);
-moz-transform: translatex(-400px);
-ms-transform: translatex(-400px);
-o-transform: translatex(-400px);
transform: translatex(-400px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.cd-popup-container p {
padding: 0px;
margin: 0px;
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
content: "";
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.cd-popup-container .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.is-visible .cd-popup-container {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrappeer">
<div class="cards">
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 1
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 2
</div>
</div>
<div class=" card [ is-collapsed ] ">
<div class="card__inner [ js-expander ]">
<span>Card</span>
<i class="fa fa-folder-o"></i>
</div>
<div class="card__expander">
<i class="fa fa-close [ js-collapser ]"></i> Expander
View Pop-up 3
</div>
</div>
</div>
</div>

Close nav on link click

My nav closes when a user clicks the "X" or hits the esc key, I would like it to close when a user clicks a link as well. The nav is constructed as such;
<div class="top-bar">
<button class="top-bar__nav-toggle hamburger" id="top-nav-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="top-bar__nav collapsed" id="top-bar__nav">
<ul class="top-bar__nav-list nav-ul">
<li>
<a class="navlink" href="#">Home</a>
</li>
<li>
<a class="navlink" href="#Portfolio">Work</a>
</li>
<li>
<a class="navlink" href="#About">About</a>
</li>
<li>
<a class="navlink" href="#Contact">Contact</a>
</li>
</ul>
</nav>
</div>
is styled as such;
body {
background: gray;
}
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
body {
background: gray;
}
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
}
and its functionality comes from this code;
(function () {
if (document.querySelector("#top-nav-toggle")) {
var navToggle = document.querySelector("#top-nav-toggle");
function watchNavClose(e) {
var topNav = document.querySelector(".top-bar");
if (!e.path.includes(topNav)) {
openCloseNav();
document.documentElement.removeEventListener("click", watchNavClose);
}
}
function openCloseNav() {
var navToggle = document.querySelector("#top-nav-toggle");
if (!navToggle.classList.contains("closed")) {
navToggle.classList.add("closed");
document.querySelector("#top-bar__nav").classList.remove("collapsed");
document.querySelector("html").addEventListener("click", watchNavClose);
document.body.style.overflowY = 'hidden';
} else {
document.querySelector("#top-bar__nav").classList.add("collapsed");
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
}
}
document.addEventListener('keydown', e => {
if ( e.keyCode === 27 ) {
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
document.querySelector("#top-bar__nav").classList.add("collapsed");
}
})
navToggle.addEventListener("click", openCloseNav);
}
})
();
I am mostly building through tutorials and such and I have tried figuring it out through similar questions here, but I am new to this and couldn't figure out how to translate it to my code. Any help is appreciated.

Added separate event listners for the <a> tag using querySelectorAll and run a function which closes nav on listening to click event
(function() {
if (document.querySelector("#top-nav-toggle")) {
var navToggle = document.querySelector("#top-nav-toggle");
function watchNavClose(e) {
var topNav = document.querySelector(".top-bar");
if (!e.path.includes(topNav)) {
openCloseNav();
document.documentElement.removeEventListener("click", watchNavClose);
}
}
function openCloseNav() {
var navToggle = document.querySelector("#top-nav-toggle");
if (!navToggle.classList.contains("closed")) {
navToggle.classList.add("closed");
document.querySelector("#top-bar__nav").classList.remove("collapsed");
document.querySelector("html").addEventListener("click", watchNavClose);
document.body.style.overflowY = 'hidden';
} else {
document.querySelector("#top-bar__nav").classList.add("collapsed");
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
}
}
document.addEventListener('keydown', e => {
if (e.keyCode === 27) {
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
document.querySelector("#top-bar__nav").classList.add("collapsed");
}
})
navToggle.addEventListener("click", openCloseNav);
document.querySelectorAll(".navlink")[0].addEventListener("click", closeNav);
document.querySelectorAll(".navlink")[1].addEventListener("click", closeNav);
document.querySelectorAll(".navlink")[2].addEventListener("click", closeNav);
document.querySelectorAll(".navlink")[3].addEventListener("click", closeNav);
function closeNav() {
var navToggle = document.querySelector("#top-nav-toggle");
document.querySelector("#top-bar__nav").classList.add("collapsed");
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
}
}
})
();
body {
background: gray;
}
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
body {
background: gray;
}
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
}
<div class="top-bar">
<button class="top-bar__nav-toggle hamburger" id="top-nav-toggle">
Close
</button>
<nav class="top-bar__nav collapsed" id="top-bar__nav">
<ul class="top-bar__nav-list nav-ul">
<li>
<a class="navlink" href="#">Home</a>
</li>
<li>
<a class="navlink" href="#Portfolio">Work</a>
</li>
<li>
<a class="navlink" href="#About">About</a>
</li>
<li>
<a class="navlink" href="#Contact">Contact</a>
</li>
</ul>
</nav>
</div>

Responsive Navbar: Menu Not Disappearing (CSS and JS)

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

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

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

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

Drop down menu is not positioning correcting and on hover text moves

I am having a little bit of trouble figuring this out. I have 2 issues
When I hover over a a button (example About). It goes bold. However, the "boldness" of the about shifts all the other buttons about 2 pixels on hover. A little stuck on how I can fix this.
I've added a drop down menu, but on hover, the drop downs aren't being positioned directly under its Category. I am trying to position it so the sub menu's are under the category, centered.
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav ul {
margin: 0;
text-transform: uppercase;
}
.nav ul li {
text-align: center;
display: inline-block;
list-style: none;
padding: 15px 15px;
cursor: pointer;
line-height: 30px;
}
.nav ul li:hover a {
font-weight: bold;
}
.nav ul li a {
color: #eee;
text-decoration: none;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

First of all you need to use > in a selector to select the direct child ..
Remove left: 0 from ul > li > ul because it sticks the nested ul absolute position to the left
Set padding : 15px to the <a> instead of <li>
By using > style the main <ul> and the nested one separately
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav > ul {
margin: 0;
text-transform: uppercase;
}
.nav > ul > li {
text-align: center;
display: inline-block;
list-style: none;
cursor: pointer;
line-height: 30px;
}
.nav > ul > li > a {
color: #eee;
text-decoration: none;
padding : 15px;
display : block;
}
.nav > ul > li:hover > a {
font-weight: bold;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
ul > li > ul {
position : static;
}
}
ul > li > ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
padding-top: 1rem;
/*left: 0;*/
display: none;
background : yellow;
}
ul > li:hover > ul{
visibility: visible;
opacity: 1;
display: block;
}
ul > li > ul > li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Bootstrap 4 nav collapsing animation stopping for a split second when opening, ok closing

When you expand the menu it slides down, stops for a split second and the continues. Sliding back up seems to be fine though but not as smooth when opening.
.navbar {
padding: 0;
float: right;
}
.navbar.fixed-top {
left: auto;
}
.navbar-menu {
position: relative;
padding: 12px 17px;
margin: 20px;
background: #FFFFFF;
cursor: pointer;
z-index: 20;
height: auto;
border-radius: 2rem;
}
#media (max-width: 767.98px) {
.navbar-menu {
margin: 10px;
}
}
.navbar-menu .title {
font-size: 14px;
font-weight: 700;
color: #351C81;
text-transform: uppercase;
margin-right: 35px;
transition: all 0.5s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
#media (max-width: 767.98px) {
.navbar-menu .title {
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
}
.navbar-menu.open .title {
transition: all 0.5s;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
.navbar-menu .navbar-toggler {
position: absolute;
top: 15px;
right: 17px;
transition: 0.5s ease-in-out;
}
.navbar-menu .navbar-toggler span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #351C81;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.navbar-menu .navbar-toggler span:nth-child(1) {
top: 0px;
}
.navbar-menu .navbar-toggler span:nth-child(2),
.navbar-menu .navbar-toggler span:nth-child(3) {
top: 6px;
}
.navbar-menu .navbar-toggler span:nth-child(4) {
top: 12px;
}
.navbar-menu.open .navbar-toggler span:nth-child(1) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-menu.open .navbar-toggler span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(4) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-collapse {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 10;
background-image: linear-gradient(#0B0039, #281663 65%, #2B176B);
background-repeat: no-repeat;
}
.navbar-collapse .navbar-nav {
width: 50%;
margin: 0 auto;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
}
.navbar-collapse .navbar-nav .nav-item {
border-bottom: 1px solid #D8D8D8;
}
.navbar-collapse .navbar-nav .nav-item:last-child {
border: none;
}
.navbar-collapse .navbar-nav .nav-item .nav-link {
font-weight: 800;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 1px;
padding: 10px 0 10px 0;
}
.navbar-collapse .navbar-nav .nav-item .nav-link:hover {
color: #68E0CA;
}
.navbar-collapse.show .navbar-nav {
transition: all 0.25s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top" data-aos="fade-left" data-aos-delay="500">
<div class="navbar-menu" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-controls="navigation">
<span class="title">Menu</span>
<div class="navbar-toggler">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<div class="navbar-collapse collapse" id="navigation">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/quiz">Quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/advice">Advise</a>
</li>
</ul>
</div>

I saw a lot of unnecessary absolute positioning, both to have items fill the screen and be centered in other elements. This was preventing Bootstrap's toggle JS from properly recognizing what the height of the expanding element should be.
Instead of having the .navbar-collapse absolute positioned to always take up your window, the content inside of it should be the height of your window - I used height: 100vh on .navbar-nav to do this.
Additionally, since .navbar-nav is already a display: flex element in Bootstrap, I removed your absolute positioning from it and added justify-content: center to vertically center the list elements in it.
Here's a diff of my changes to your CSS (yours on the left):
And working example below:
.navbar {
padding: 0;
float: right;
}
.navbar.fixed-top {
left: auto;
}
.navbar-menu {
position: relative;
padding: 12px 17px;
margin: 20px;
background: #FFFFFF;
cursor: pointer;
z-index: 20;
height: auto;
border-radius: 2rem;
}
#media (max-width: 767.98px) {
.navbar-menu {
margin: 10px;
}
}
.navbar-menu .title {
font-size: 14px;
font-weight: 700;
color: #351C81;
text-transform: uppercase;
margin-right: 35px;
transition: all 0.5s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
#media (max-width: 767.98px) {
.navbar-menu .title {
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
}
.navbar-menu.open .title {
transition: all 0.5s;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
margin-right: -17px;
}
.navbar-menu .navbar-toggler {
position: absolute;
top: 15px;
right: 17px;
transition: 0.5s ease-in-out;
}
.navbar-menu .navbar-toggler span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #351C81;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.navbar-menu .navbar-toggler span:nth-child(1) {
top: 0px;
}
.navbar-menu .navbar-toggler span:nth-child(2),
.navbar-menu .navbar-toggler span:nth-child(3) {
top: 6px;
}
.navbar-menu .navbar-toggler span:nth-child(4) {
top: 12px;
}
.navbar-menu.open .navbar-toggler span:nth-child(1) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-menu.open .navbar-toggler span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navbar-menu.open .navbar-toggler span:nth-child(4) {
top: 6px;
width: 0%;
left: 50%;
}
.navbar-collapse {
z-index: 10;
background-image: linear-gradient(#0B0039, #281663 65%, #2B176B);
background-repeat: no-repeat;
}
.navbar-collapse .navbar-nav {
height: 100vh;
justify-content: center;
width: 50%;
margin: 0 auto;
text-align: center;
filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
opacity: 0;
}
.navbar-collapse .navbar-nav .nav-item {
border-bottom: 1px solid #D8D8D8;
}
.navbar-collapse .navbar-nav .nav-item:last-child {
border: none;
}
.navbar-collapse .navbar-nav .nav-item .nav-link {
font-weight: 800;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 1px;
padding: 10px 0 10px 0;
}
.navbar-collapse .navbar-nav .nav-item .nav-link:hover {
color: #68E0CA;
}
.navbar-collapse.show .navbar-nav {
transition: all 0.25s;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top" data-aos="fade-left" data-aos-delay="500">
<div class="navbar-menu" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-controls="navigation">
<span class="title">Menu</span>
<div class="navbar-toggler">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<div class="navbar-collapse collapse" id="navigation">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/quiz">Quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/advice">Advise</a>
</li>
</ul>
</div>

Categories

Resources