Close nav on link click - javascript

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>

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>

Delay transition effects until after nav closes

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!

My slide navigation menu does not hide the content that it was sliding over

I tried my best to make sense of the title but for more references, I am giving screenshots below the menu when it slides over the page covering the content the content should be hidden but its not
Before:
https://imgur.com/PTNwfdA
After:
https://imgur.com/B2Iz4IE
Here's the CSS for my navigation:
/* navbar Start*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
#active:checked~.wrapper {
/*left: 0;*/
right: 0;
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 30%;
width: 40%;
border-bottom: 3px solid #000000;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before {
transform: translateY(-8px);
}
.menu-btn:after {
transform: translateY(8px);
}
.close {
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6s;
}
/* closing animation */
#active:checked+.menu-btn span {
transform: scaleX(0);
}
#active:checked+.menu-btn:before {
transform: rotate(45deg);
border-color: #fff;
}
#active:checked+.menu-btn:after {
transform: rotate(-45deg);
border-color: #fff;
}
.wrapper ul {
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: right;
}
.wrapper ul li {
height: 10%;
margin: 15px 0;
}
.wrapper ul li a {
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
position: absolute;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
/*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #4114a1;
}
input[type="checkbox"] {
display: none;
}
.product a img {
display: none;
position: absolute;
left: -400px;
top: -200px;
}
.product a img {
display: none;
}
.product a:hover img {
display: inherit;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
overflow-y: hidden;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#active:checked~.wrapper ul li a {
opacity: 1;
align-items: center;
}
.wrapper ul li a {
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(100px);
font-family: 'LemonMilk';
align-items: center;
}
#active:checked~.wrapper ul li a {
transform: none;
transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
/* easeOutBackを緩めた感じ */
transition-delay: .6s;
transform: translateX(-100px);
}
.pages-nav--open {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pages-nav__item {
display: flex;
flex-direction: row;
min-height: 300vh;
}
.pages-nav .pages-nav__item--social {
width: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
transition: transform 1.2s, opacity 1.2s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.pages-nav--open .pages-nav__item--social {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.link {
font-size: 0.85em;
font-weight: bold;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
.link:hover,
.link:focus {
color: #fff;
}
.link--page {
display: block;
color: #cecece;
text-align: center;
}
.link--page:not(.link--faded)::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 50%;
height: 2px;
margin: 5px 0 0 -15px;
background: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.link--page:hover:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.link--faded {
color: #4f4f64;
}
.link--faded:hover,
.link--faded:focus {
color: #5c5edc;
}
.link--page.link--faded {
font-size: 0.65em;
}
.link--social {
font-size: 1.5em;
margin: 0 0.75em;
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
#media screen and (max-width: 40em) {
.js .pages-nav {
display: block;
padding: 10px 20px 0 20px;
text-align: left;
}
.pages-nav__item {
width: 100%;
}
.pages-nav__item--small {
display: inline-block;
width: auto;
margin-right: 5px;
}
.pages-nav__item--social {
font-size: 0.9em;
}
.menu-button {
top: 15px;
right: 10px;
left: auto;
}
.info {
font-size: 0.85em;
}
.poster {
margin: 1em;
}
}
/* ///////////////////// navbar end ///////////////////////// */
and here's my css for the page this is on:
.typewritter {
height: 80vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 28%;
animation: typing 4s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
body {
margin: 0px;
}
#container {
/* Center the text in the viewport. */
position: absolute;
display: flex;
margin: auto;
width: 100vw;
height: 80pt;
top: 0;
bottom: 0;
/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
filter: url(#threshold) blur(0.6px);
}
/* Your average text styling */
#text1, #text2 {
position: absolute;
width: 100%;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 80pt;
text-align: center;
user-select: none;
}
If any more info is needed I'll be happy to provide it!

all you need to do is just set a greater z-index to .wrapper also u need to give a z-index to .menu-btn else it would be below the wrapper
this should be your code
.menu-btn{
position: absolute;
z-index: 12;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.wrapper{
position: fixed;
z-index: 10;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}

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

How can I disable scrolling when my hamburger menu is open?

I am working on a website with a hamburger menu that fills the entire page when clicked. The only problem is the page behind still scrolls when the nav is open, and I can't figure out how to disable scrolling while the menu is open. I have tried changing overflow-y: hidden, but it doesn't seem to work.
Here is the HTML for the menu:
<div id="menu">
<div class="logotext">
ONWORD
</div>
<input type="checkbox" id="myInput">
<label for="myInput">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</label>
<aside>
<div class="aside-section aside-left">
<div class="aside-content">
<p> Languages of the land</p>
</div>
</div>
<div class="aside-section aside-right">
<ul class="aside-list">
<li>Start Learning</li>
<li>Language Map</li>
<li>History</li>
<li>Stories</li>
<li>Contact</li>
</ul>
</div>
</aside>
</div>
Here is the CSS:
.logotext a {
font-family: "Raleway", sans-serif;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
left: 1%;
z-index: 99999;
color: white;
position: absolute;
padding-left: 19px;
padding-right: 19px;
padding-top: 22px;
transition: 0.5s;
}
.logotext a:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.aside-section {
top: 0;
bottom: 0;
position: absolute;
z-index: 99998;
overflow: hidden;
}
.aside-left {
display: none;
width: 40%;
left: 0;
background-color: white;
background-image: url(../img/menu1.jpeg);
background-position: center;
background-size: cover;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-right {
width: 100%;
right: 0;
background-color: #000000;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 160px;
text-align: left;
padding-left: 50px;
z-index: 99998;
}
.aside-content {
margin-top: 150px;
padding: 0 40px;
position: relative;
color: #000000;
text-align: center;
z-index: 99998;
}
.aside-list li {
margin-bottom: 20px;
z-index: 99998;
padding-bottom: 7px;
}
.aside-anchor::after {
content: "";
position: absolute;
bottom: 0;
background-color: #000000;
left: 0;
right: 0;
height: 2px;
border-radius: 3px;
}
.aside-anchor::before {
border-radius: 3px;
content: "";
position: absolute;
bottom: 0;
background-color: #f5eded;
left: 0;
height: 1px;
z-index: 1;
width: 50%;
-webkit-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.aside-anchor:hover:before {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
background-color: #dd8800;
}
.aside-anchor {
padding-bottom: 5px;
color: #fff;
text-decoration: none;
font-size: 14px;
position: relative;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ aside .aside-left {
transform: translateY(0%);
}
input[type="checkbox"]:checked ~ aside .aside-right {
transform: translateX(0%);
}
input[type="checkbox"]:checked ~ label .bar {
background-color: #fff;
}
input[type="checkbox"]:checked ~ label .top {
-webkit-transform: translateY(0px) rotateZ(45deg);
-moz-transform: translateY(0px) rotateZ(45deg);
-ms-transform: translateY(0px) rotateZ(45deg);
-o-transform: translateY(0px) rotateZ(45deg);
transform: translateY(0px) rotateZ(45deg);
}
input[type="checkbox"]:checked ~ label .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
input[type="checkbox"]:checked ~ label .middle {
width: 0;
}
.middle {
margin: 0 auto;
}
label {
top: 10px;
display: inline-block;
padding: 7px 10px;
background-color: transparent;
cursor: pointer;
margin: 10px;
position: absolute;
z-index: 99999;
text-align: right;
right: 1%;
transition: 0.5s;
}
label:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.bar {
display: block;
background-color: #ffffff;
width: 30px;
height: 3px;
border-radius: 5px;
margin: 5px auto;
transition: background-color 0.4s ease-in, transform 0.4s ease-in,
width 0.4s ease-in;
z-index: 99999;
}
.aside-section h1 {
margin: 0;
position: relative;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 35px;
font-family: 'BritishShorthair';
}
.aside-section p {
font-size: 90px;
text-align: center;
line-height: 130px;
font-family: 'BritishShorthair';
margin-top: 0px;
color: white;
}
#media (min-width: 992px) {
h1 {
font-size: 40px;
}
.aside-left {
display: block;
}
.aside-right {
width: 60%;
}
}

When you said you set overflow-y: hidden. Did you do this on the body?

Categories

Resources