Develop Reference

Toggle 'display:none' with JavaScript after transition?

I want to implement a dropdown menu for mobile devices with animation so when the transition ends, it needs to be display:none. Here's what I've done:
const menuButton = document.querySelector('.menuButton')
const navMenu = document.querySelector('.nav')
function menuToggle() {
if (navMenu.classList.contains('navDisplay')) {
navMenu.classList.remove('navShow')
setTimeout(() => {
navMenu.classList.remove('navDisplay')
}, 300)
} else {
navMenu.classList.add('navDisplay')
setTimeout(() => {
navMenu.classList.add('navShow')
}, 0)
}
}
menuButton.addEventListener('click', menuToggle)
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
color: #e8e8e8;
}
html, body {
overflow-x: hidden;
background-color: rgb(66, 66, 66);
}
h2 {
margin: 15px 0;
}
a {
transition: all.3s ease;
-webkit-transition: all.3s ease;
-moz-transition: all.3s ease;
color: #e8e8e8;
text-decoration: none;
}
a:hover {
color: #777777;
}
/*--------------NAV BAR------------*/
header {
background-color: rgba(24, 24, 24, 0.95);
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.menuButton {
display: none;
position: fixed;
right: 0;
color: white;
font-size: 1.5em;
line-height: 65px;
margin: 10 30px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.logo {
color: white;
font-size: 30px;
font-weight: bold;
font-family: 'Fredoka One', sans-serif;
line-height: 65px;
}
nav div ul {
text-align: center;
flex-direction: column;
margin-top: 50px;
overflow: hidden;
}
nav div ul li {
margin: 20px 0;
}
nav {
flex-direction: column;
}
.nav {
display: none;
box-sizing: border-box;
width: 100%;
overflow: hidden;
height: 0;
transition: height 300ms ease-in-out;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
}
.orderButton {
padding: 20px;
}
.logo {
text-align: center;
}
.menuButton {
display: block;
}
.navShow {
height: 100vh;
}
.navDisplay {
display: block;
}
<header>
<div class="menuButton">☰</div>
<nav>
<p class="logo">LOGO</p>
<div class="nav">
<ul>
<li><div class="orderButton">ELEMENT1</div></li>
<li>ELEMENT2</li>
<li>ELM3</li>
</ul>
</div>
</nav>
</header>
So, the menu has display:none and height:0 by default. The click event listener triggers function that checks if menu is displayed or not and adds or removes respective classes (the display class removes after the transition ends with the help of timeout 400ms). Is there any more beautiful or less code solutions?

You are making it way more complex. You don't need to have a display:none and a height:0. height:0 with overflow:hidden will do the job. If you wanna show the links after the menu gets its height with a delay, you could use opacity. That and using the toggle function will make it as simple as this:
const menuButton = document.querySelector(".menuButton");
const navMenu = document.querySelector(".nav");
function menuToggle() {
navMenu.classList.toggle("navShow");
}
menuButton.addEventListener("click", menuToggle);
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
color: #e8e8e8;
}
html,
body {
overflow-x: hidden;
background-color: rgb(66, 66, 66);
}
h2 {
margin: 15px 0;
}
a {
transition: all.3s ease;
-webkit-transition: all.3s ease;
-moz-transition: all.3s ease;
color: #e8e8e8;
text-decoration: none;
}
a:hover {
color: #777777;
}
/*--------------NAV BAR------------*/
header {
background-color: rgba(24, 24, 24, 0.95);
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.menuButton {
display: none;
position: fixed;
right: 0;
color: white;
font-size: 1.5em;
line-height: 65px;
margin: 10 30px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.logo {
color: white;
font-size: 30px;
font-weight: bold;
font-family: "Fredoka One", sans-serif;
line-height: 65px;
}
nav div ul {
text-align: center;
flex-direction: column;
margin-top: 50px;
overflow: hidden;
}
nav div ul li {
margin: 20px 0;
}
nav {
flex-direction: column;
}
.nav {
box-sizing: border-box;
width: 100%;
overflow: hidden;
height: 0;
opacity:0;
transition: height 300ms ease-in-out,opacity 300ms 400ms ease-in-out;
}
.orderButton {
padding: 20px;
}
.logo {
text-align: center;
}
.menuButton {
display: block;
}
.navShow {
opacity:1;
height: 100vh;
}
<header>
<div class="menuButton">☰</div>
<nav>
<a href="index.html">
<p class="logo">LOGO</p>
</a>
<div class="nav">
<ul>
<li>
<div class="orderButton">ELEMENT1</div>
</li>
<li>ELEMENT2</li>
<li>ELM3</li>
</ul>
</div>
</nav>
</header>

How to get a modal to open by rolling in from the left and close by rolling out to the left?

When I click on a navigation link (Contact), I want a modal to open by rolling in from the left. Then clicking "close" will roll the modal out to the left. I have tried several iterations of this with an animation where I can get the modal to roll in, but not rollout. Then I used JS to toggle the class. With this, the modal rolled in and out, but couldn't repeat it without reloading the page. I am using HTML, CSS, and Vanilla JavaScript. Any help on what I am missing would be appreciated. Here is my current code...
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div>
<section id="home"></section>
</div>
<div class="contact-modal" id="modal">
<div class="contact-content">
<span class="contact-close"><img class="close" img src="images/close.png" alt="Close"></span>
<h1>Contact Modal</h1>
<p>(555) 555-5555</p>
</div>
</div>
CSS:
/* Global Color Palette */
:root {
--primary-color: orange;
--secondary-color: black;
--darkshadow-color: #000000cc;
--white-color: #fff;
--background-color: black;
}
/* Global Typography */
#import url('https://fonts.googleapis.com/css?family=Poppins');
:root {
--primary-font: Poppins, serif;
}
html {
font-size: 100%;
}
#media (max-width: 768px) {
html { font-size: 70%;}
}
#media (max-width: 500px) {
html { font-size: 40%;}
}
p {
font-family: var(--primary-font);
font-weight: 400;
font-size: 1.5em;
color: var(--primary-color);
}
h1 {
font-family: var(--primary-font);
font-weight: 500;
font-size: 4em;
color: var(--primary-color);
}
/* General Element Styling */
body{
margin: 0;
background-color: gray;
}
section {
margin: 0;
padding: 20px;
height: 100em;
height: 100vh;
}
/* Navigation Styling */
nav {
font-family: var(--primary-font);
font-weight: 400;
font-size: 2.5em;
color: var(--primary-color);
text-shadow: 2px 2px 2px var(--darkshadow-color);
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a {
display: block;
text-decoration: none;
color: var(--primary-color);
}
/* Style Contact Content */
.contact-modal {
background-color: var(--background-color);
border: 3px solid var(--primary-color);
border-radius: 10px;
width: 30%;
margin: auto;
opacity: 0;
visibility: hidden;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
#-webkit-keyframes rollIn {
0% {
-webkit-transform: translateX(-200%) rotate(-180deg);
}
100% {
-webkit-transform: translateX(-50%) rotate(0deg);
}
}
#keyframes rollIn {
0% {
transform: translateX(-200%) rotate(-180deg);
}
100% {
transform: translateX(-50%) rotate(0deg);
}
}
}
.contact-content {
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
text-align: center;
transform: translateZ(-50%, -50%)
}
.close {
width: auto;
height: 40px;
float: right;
margin: -80px;
}
.show-contact-modal {
opacity: 1;
visibility: visible;
transform: rotate (-180deg);
}
JavaScript:
let modal = document.querySelector(".contact-modal");
let show = document.querySelector(".show-contact-modal");
let closeButton = document.querySelector(".close-contact");
function toggleModal() {
modal.classList.toggle("show-contact-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
show.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
My code is now not working, but gives you an idea of what I am working from

I found the answer.
Use styling for the modal that is linked by the id and with a negative left (off the page). Create 2 classes for running the animation one to show and one to hide. Make the link call the show function and the close button call the hide function.
Here is a link to view in action: https://codepen.io/megank-playground/pen/BappdqR
and below is the code I implemented:
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li><span class="link" onclick="showContact()">Contact</span></li>
</ul>
</nav>
<div>
<section id="home"></section>
</div>
<div class="contact-modal" id="contactmodal">
<div class="contact-content">
<img src="images/close.png" alt="Close" class="close" onclick="hideContact()">
<h1>Contact Modal</h1>
<p>(555) 555-5555</p>
</div>
</div>
CSS:
/* Global Color Palette */
:root {
--primary-color: orange;
--secondary-color: black;
--darkshadow-color: #000000cc;
--white-color: #fff;
--background-color: black;
}
/* Global Typography */
#import url('https://fonts.googleapis.com/css?family=Poppins');
:root {
--primary-font: Poppins, serif;
}
html {
font-size: 100%;
}
#media (max-width: 768px) {
html { font-size: 70%;}
}
#media (max-width: 500px) {
html { font-size: 40%;}
}
p {
font-family: var(--primary-font);
font-weight: 400;
font-size: 1.5em;
color: var(--primary-color);
}
h1 {
font-family: var(--primary-font);
font-weight: 500;
font-size: 4em;
color: var(--primary-color);
}
/* General Element Styling */
body{
margin: 0;
background-color: gray;
}
section {
margin: 0;
padding: 20px;
height: 100em;
height: 100vh;
}
/* Navigation Styling */
nav {
font-family: var(--primary-font);
font-weight: 400;
font-size: 2.5em;
color: var(--primary-color);
text-shadow: 2px 2px 2px var(--darkshadow-color);
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a, span {
display: block;
text-decoration: none;
color: var(--primary-color);
}
.link {
cursor: pointer;
}
/* Style Contact Content */
#contactmodal{
position: fixed;
top: 50%;
left: -50%;
background-color: var(--background-color);
padding: 20px;
border: 2px solid var(--primary-color);
border-radius: 10px;
height: auto;
width: 30%;
}
.contact-content {
text-align: center;
}
.close {
width: auto;
height: 40px;
float: right;
margin: -80px;
cursor: pointer;
}
.hideBox {
animation: moveLeft 2s ease-in-out forwards;
}
.showBox {
animation: moveright 2s ease-in-out forwards;
}
#keyframes moveLeft {
from {left: 50%; }
to {left: -50%; }
0% { transform: translateX(-50%) rotate(0deg); }
100% { transform: translateX(-100%) rotate(-360deg); }
}
#keyframes moveright {
from {left: -50%; }
to {left: 50%; }
0% { transform: translateX(-100%) rotate(-360deg); }
100% { transform: translateX(-50%) rotate(0deg); }
}
JS:
/* Contact Box Animation */
function showContact() {
document.getElementById("contactmodal").className = "showBox";
}
function hideContact() {
document.getElementById("contactmodal").className = "hideBox";
}

Footer has a white space to the right

Basically, as you will see, when i preview the device in mobile S, the footer does not fill the entire browser width unlike the nav bar. This problem is happening from mobile S size to laptop L size!
The code in jsFiddle is more complete!
https://imgur.com/l131R3E
How can i get rid of this white space?
Code: https://jsfiddle.net/84td5z1x/
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.ulSecções');
const navLinks = document.querySelectorAll('.ulSecções li');
//Toggle Nav
burger.addEventListener('click', () => {
nav.classList.toggle('navActive');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
/*Ignore this*/
div.whiteSpace {
width: 100%;
height: 1000px;
}
/*Mobile navBar Burger*/
.burger {
display: none;
float: right;
padding: 31px 49px;
cursor: pointer;
}
.burger div {
width: 27px;
height: 3px;
margin: 5px;
background-color: rgb(192, 163, 68);
transition: all 0.3s ease;
border-radius: 2px;
}
/*Background Menu*/
nav.menu {
width: 100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu {
position: fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img {
width: 180px;
float: left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li {
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i {
font-size: 16px;
}
nav ul.ulSecções li a.loja {
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/*Footer*/
body footer div.footer {
width: 100%;
height: 170px;
background-color: rgb(24, 24, 24);
}
footer div.icons {
width: 100%;
height: auto;
margin: auto;
padding: 20px 0px;
}
body footer div.icons ul {
margin: 0px;
padding: 0px;
text-align: center;
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 10px 10px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 28px;
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*Toggle burger*/
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/*Mobile screen adjustments*/
/*Mobile S*/
#media screen and (max-width: 980px) {
nav.menu {
width: 100%;
height: 140px;
}
.ulLogo li {
margin-left: 25%;
}
.ulLogo li a img {
width: 400px;
}
.ulSecções {
position: absolute;
right: 0px;
height: 40vh;
top: 139px;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow: scroll;
transform: translateX(100%);
transition: transform 400ms ease-out 0s;
}
nav ul.ulSecções li a {
display: block;
font-family: "Ubuntu", "Palatino", sans-serif;
color: rgb(192, 163, 68);
text-transform: uppercase;
font-size: 40px;
letter-spacing: 0em;
opacity: 0.9;
padding: 0px 10px;
}
nav ul.ulSecções li a.loja {
font-size: 35px;
}
nav ul.ulSecções li a i {
font-size: 35px;
}
div.burger {
display: block;
padding-right: 100px;
padding-top: 57px;
}
.burger div {
width: 40px;
height: 5px;
margin: 4px;
}
/*Footer*/
body footer div.footer {
width: 100%;
/*Erro aqui!!*/
height: 250px;
background-color: rgb(24, 24, 24);
}
body footer div.icons ul li {
display: inline-block;
list-style: none;
width: 50px;
height: 50px;
margin: 15px 30px;
}
body footer div.icons ul li a {
color: rgb(255, 255, 255);
font-size: 50px;
}
}
.navActive {
transform: translateX(0%)
}
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<img id="espiral" src="../Logo.png">
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> Home </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
</li>
<li>Cursos
</li>
</li>
<li>Conteúdos Especiais
</li>
<li>Recursos
</li>
<li> Contatos </li>
<li> </i> </li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<div class="whiteSpace"></div>
<!--Footer-->
<footer>
<div class="footer">
<div class="icons">
<ul>
<li> <i class="fa fa-instagram" aria-hidden="true"></i> </li>
<li> <i class="fa fa-facebook-square" aria-hidden="true"></i> </li>
<li> <i class="fa fa-youtube-play" aria-hidden="true"> </i> </li>
</ul>
</div>
</div>
</footer>

Add body {margin: 0;} to reset default margin.

At the top of your CSS, add.
*{
margin: 0;
}
This should remove the pre-existing margin, that is present by default on browsers.
I always start my css with
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Know more about the CSS universal selector (*)

The body is set to margin 8px, set it to 0. The above answer is correct.
https://imgur.com/a/Vy2i5YR

Scroll to id only scrolls down

I use fullpage.js and when I create a link and link it to an id it works fine but when I want to scroll up again I can't do that.
HTML:
click here
jsfiddle

I've made a number of updates to yours. I just started over as I felt like yours was kind of everywhere. Here's your fiddle - See Fiddle
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
// fullpage customization
$('#fullpage').fullpage({
sectionsColor: [],
sectionSelector: '.vertical-scrolling',
navigation: true,
slidesNavigation: true,
controlArrows: false,
anchors: ['home', 'about', 'contact'],
menu: '#menu',
afterLoad: function(anchorLink, index) {
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
if (index == 5) {
$('#fp-nav').hide();
}
},
onLeave: function(index, nextIndex, direction) {
if(index == 5) {
$('#fp-nav').show();
}
},
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
if(anchorLink == 'fifthSection' && slideIndex == 1) {
$.fn.fullpage.setAllowScrolling(false, 'up');
$header_top.css('background', 'transparent');
$nav.css('background', 'transparent');
$(this).css('background', '#374140');
$(this).find('h2').css('color', 'white');
$(this).find('h3').css('color', 'white');
$(this).find('p').css(
{
'color': '#DC3522',
'opacity': 1,
'transform': 'translateY(0)'
}
);
}
},
onSlideLeave: function( anchorLink, index, slideIndex, direction) {
if(anchorLink == 'fifthSection' && slideIndex == 1) {
$.fn.fullpage.setAllowScrolling(true, 'up');
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
}
}
});
#import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);
/* ICON STYLES - ICON FROM: http://fontastic.me/
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#font-face {
font-family: "untitled-font-1";
src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot");
src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix") format("embedded-opentype"),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff") format("woff"),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf") format("truetype"),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:after,
[class*=" icon-"]:after {
font-family: "untitled-font-1";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-up-open-big { display: inline-block; }
.icon-up-open-big:after {
content: "a";
font-size: 2.5em;
display: block;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
color: black;
-webkit-transition: color .3s;
transition: color .3s;
}
.icon-up-open-big:hover:after {
color: white;
}
.scroll-icon {
position: absolute;
left: 50%;
bottom: 30px;
padding: 0 10px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
-ms-transform: translateY(300px);
transform: translateY(300px);
-webkit-transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
/* RESET-GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
margin: 0;
padding: 0;
font-family: 'Alegreya Sans', Arial, sans-serif;
text-transform: uppercase;
}
html {
font-size: 62.5%;
}
body {
color: black;
letter-spacing: .18em;
}
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none;
}
/* NAV STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-top {
background: rgba(0, 47, 77, .3);
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
z-index: 12;
box-sizing: border-box;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
display: block;
padding: 0 10px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 30px;
left: 10px;
-webkit-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
-webkit-transition: all 1s;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
nav li {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
-webkit-transition: background .3s;
transition: background .3s;
}
nav li:nth-child(odd) a,
body.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {
background: #962D3E;
}
nav li:nth-child(even) a {
background: #aa3346;
}
nav li:nth-child(odd) a:hover {
background: #9e2f41;
}
nav li:nth-child(even) a:hover {
background: #c53c52;
}
nav li.active a,
body.fp-viewing-fifthSection-1 #menu li:last-child a {
background: #453659;
}
/* SECTION STYLES - fullPage.js
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section {
text-align: center;
/*background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;*/
}
h2 {
text-transform: lowercase;
font-size: 4em;
margin-bottom: 20px;
}
h3 {
font-weight: 300;
font-size: 2.8em;
}
/* SLIDENAV STYLES - fullPage.js
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
display: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 1px solid #24221F;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media screen and (max-width: 767px) {
nav ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<header>
<div class="header-top clearfix">
<h1 class="l-left">Your Logo</h1>
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
<nav class="hide">
<ul id="menu">
<li data-menuanchor="home">
Home
</li>
<li data-menuanchor="about">
About
</li>
<li data-menuanchor="contact">
Contact
</li>
</ul>
</nav>
</header>
<div id="fullpage">
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>first slide in slideshow</h3>
<div class="scroll-icon">
<p>Jump into the next slide</p>
</div>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>second slide in slideshow</h3>
<div class="scroll-icon">
<p>Jump into the next slide</p>
</div>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>third and final slide in slideshow</h3>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>fourth slide in slideshow</h3>
</section>
</div>

Navigation Overlay Hamburger Menu Click Issues

I have built a hamburger navigation that when clicked overlays the navigation elements on a full screen coloured background.
I have a couple of slight bugs which i cannot work out my mistake(s), or how to rectify them.
When you click the hamburger icon and the overlay is then displayed, if you then click anywhere on the background colour, the overlay closes. How can i keep the overlay visible unless a link or the close icon/button is clicked?
When you click a link, the overlay disappears (as expected) but then returns again after a split second. How can i stop this 'flashing' when clicked, so i can either keep the overlay showing until new page is loaded or hide the overlay once clicked.
$(document).ready(function() {
$(".menu-btn a").click(function() {
var scroll = $(window).scrollTop();
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
if ($(this).hasClass('btn-close')) {
$(".navbar").css("background-color", "grey");
} else if (scroll > 100) {
$(".navbar").css("background-color", "#CEB400");
}
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
if ($('.overlay:visible').length == 0) {
$(".navbar").css("background-color", "#CEB400");
}
} else {
$(".navbar").css("background-color", "grey");
}
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
/* font-size: 32px; */
}
.menu-btn a {
display: flex;
text-decoration: none;
color: #ffffff;
/* safari hack */
align-items: center;
}
.btn-open:after {
color: inherit;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-open:hover:after {
color: inherit;
}
.btn-close:after {
color: inherit;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-close:hover:after {
color: #ffffff;
}
.template-home .btn-open:after,
.template-home .btn-open:hover:after,
.template-home .btn-close:after,
.template-home .btn-close:hover:after,
.template-home .menu-btn a span {
color: #ffffff!important;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(209, 180, 0);
}
.overlay .menu {
margin: 150px 20px;
/* width: 80%; */
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 20px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 10px 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #fff;
text-transform: capitalize;
font-weight: 300;
font-size: 30px;
}
.overlay .menu ul ul li a:hover {
color: #000000;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #000000;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
letter-spacing: 1px;
}
p.email a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 16px;
color: #ffffff;
/* line-height: 18px; */
font-weight: 600;
position: relative;
/* top: -5px; */
right: 10px;
}
.navbar-text div {
display: inline-block;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.header-contact svg {
margin-left: 10px;
font-size: 22px;
}
.header-contact {
margin-right: 75px;
}
.header-contact a {
color: #ffffff;
}
.header-contact {
font-weight: 600!important;
font-size: 16px!important;
}
.navbar {
-webkit-transition: background-color 500ms ease-in-out;
-ms-transition: background-color 500ms ease-in-out;
transition: background-color 500ms ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
<nav class="navbar fixed-top" style="background-color: grey;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pb-white.png" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
<ul>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
</ul>
</li>
<li>
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div style="height:2000px;"></div>
I currently have my work on a codepen here: https://codepen.io/whitinggg/pen/bLzxGG

To solve both your problems :
You need to remove the onClick event of your overlay, I.E. those lines :
$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
This will stop triggering event when you click on overlay.
Your first issue is then fixed, and your second issue was that by clicking on a link, you also click on the overlay which contains the link, so the event was triggered twice, and your overlay fade out and in, creating the blink effect.

Just remove this line of code from the script
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});