We Keep Coding

Why doesn`t work my popup, although I connect Js?

Yesterday I made a popup in Html, Css and JS but it didn`t work.
Javascript is connected with the Html file, the button can you see on the header everytime, but I`ll that when I click on the button "Codes" that a popup open...
In a other project from me the popup works with the same code...
What shall I do that it works? Or what is the mistake in the code?
function togglePopup() {
document.getElementById("popup").classList.toggle("active");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#pop-up {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
}
#pop-up.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>

Your id is misspelled. popup <-> pop-up
You should add open not active in js toggle function.
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#popup {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
background: rgba(255, 255, 255, 0.8);
transition: opacity 0.2s;
}
#popup.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup active" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>

First and foremost your id attribute is "popup" and in your CSS rules is "pop-up".
Then in your CSS rules, you use the class "open" to show the popup, but in the JS you use "active".
So to work properly you should change the following:
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
Then change:
<div class="popup" id="pop-up">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>

Navbar dropdown not function onclick

This code was functional but when i implemented it to a new website it is not working.
I'm trying to create a navbar that has a hamburger button but it won't work and I'm not sure why.
I tried to decode the problem but did not manage.
What could be the cause to this problem?
I am using javascript onclick function.
/* Responsive Hamburger Menu */
const toggledropdown = document.getElementsByClassName('hamburger')[0];
const togglemenu = document.getElementsByClassName('nav-ul')[0];
const navcenter = document.getElementsByClassName('nav-center')[0];
toggledropdown.onclick = () => {
togglemenu.classList.toggle('active'),
togglemenu.classList.toggle('nav-center');
}
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,500;1,600;1,700&display=swap');
:root{
--primary: #0098fa;
--accent: #effaff;
--dark: #394e67;
--darker: #2f3640;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: violet;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
section{
padding: 100px;
padding-bottom: 0px;
}
footer{
background-color: var(--darker);
color: var(--accent);
}
.container{
width: 70%;
margin: 0 auto;
}
a{
text-decoration: none;
}
/* -------- Navigation CSS ------- */
header{
background-color: var(--darker);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.navbar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
justify-content: flex-start;
align-items: center;
color: white;
padding: 20px;
}
.logo h1{
color: white;
font-size: 2rem;
}
.nav-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-ul ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
.nav-ul ul li{
list-style: none;
}
.nav-ul ul li a{
text-decoration: none;
color: white;
padding: 15px;
margin: 5px;
cursor: pointer;
}
.nav-ul ul li a:hover{
}
.icon{
height: 20px;
cursor: pointer;
position: absolute;
top: 1.88rem;
right: 2rem;
}
.icon a img{
height: 100%;
}
.hamburger{
display: none;
position: absolute;
top: 1.46rem;
left: 2rem;
flex-direction: column;
width: 40px;
height: 40px;
cursor: pointer;
}
.hamburger .bar{
height: 3px;
width: 100%;
margin: 5px;
background-color: white;
}
.nav-up {
top: -10%;
transition: 2s ease-in;
}
.nav-down{
transition: 0.5s ease-in;
}
#media screen and (max-width:1024px) {
section{
padding: 50px;
}
.hamburger{
display: flex;
}
.navbar{
display: flex;
flex-direction: column;
}
.nav-ul{
display: none;
width: 100%;
transition: 1s ease-in;
}
.nav-ul ul{
flex-direction: column;
}
.nav-ul li{
text-align: center;
}
.nav-ul li a{
padding: .5rem 1rem;
}
.nav-ul .active{
display: flex;
flex-direction: column;
}
.nav-ul li{
animation-name: animateIn;
animation-duration: 350ms;
animation-delay: calc(var(--animation-order) * 100ms);
animation-fill-mode: both;
animation-timing-function: ease-in-out;
margin-top: 16px;
font-size: 1rem;
}
#keyframes animateIn {
0% {
opacity: 0;
transform: scale(0.6) translateY(-8px);
}
100% {
opacity: 1;
}
}
}
<nav class="container navbar">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<h1 style="color: white">LOGO</h1>
</div>
<div class="nav-ul nav-center">
<ul>
<li style="--animation-order: 1;">Home</li>
<li style="--animation-order: 2;">About</li>
<li style="--animation-order: 3;">People</li>
<li style="--animation-order: 4;">Menu</li>
<li style="--animation-order: 5;">Contact</li>
<li style="--animation-order: 6;">Reservations</li>
</ul>
</div>
<div class="icon">
<img src="heart.svg" alt="favorites">
</div>
</nav>

You had a space between .nav-ul and .active
/* Responsive Hamburger Menu */
const toggledropdown = document.getElementsByClassName('hamburger')[0];
const togglemenu = document.getElementsByClassName('nav-ul')[0];
const navcenter = document.getElementsByClassName('nav-center')[0];
toggledropdown.onclick = () => {
togglemenu.classList.toggle('active'),
togglemenu.classList.toggle('nav-center');
}
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,500;1,600;1,700&display=swap');
:root{
--primary: #0098fa;
--accent: #effaff;
--dark: #394e67;
--darker: #2f3640;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: violet;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
section{
padding: 100px;
padding-bottom: 0px;
}
footer{
background-color: var(--darker);
color: var(--accent);
}
.container{
width: 70%;
margin: 0 auto;
}
a{
text-decoration: none;
}
/* -------- Navigation CSS ------- */
header{
background-color: var(--darker);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.navbar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
justify-content: flex-start;
align-items: center;
color: white;
padding: 20px;
}
.logo h1{
color: white;
font-size: 2rem;
}
.nav-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-ul ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
.nav-ul ul li{
list-style: none;
}
.nav-ul ul li a{
text-decoration: none;
color: white;
padding: 15px;
margin: 5px;
cursor: pointer;
}
.nav-ul ul li a:hover{
}
.icon{
height: 20px;
cursor: pointer;
position: absolute;
top: 1.88rem;
right: 2rem;
}
.icon a img{
height: 100%;
}
.hamburger{
display: none;
position: absolute;
top: 1.46rem;
left: 2rem;
flex-direction: column;
width: 40px;
height: 40px;
cursor: pointer;
}
.hamburger .bar{
height: 3px;
width: 100%;
margin: 5px;
background-color: white;
}
.nav-up {
top: -10%;
transition: 2s ease-in;
}
.nav-down{
transition: 0.5s ease-in;
}
#media screen and (max-width:1024px) {
section{
padding: 50px;
}
.hamburger{
display: flex;
}
.navbar{
display: flex;
flex-direction: column;
}
.nav-ul{
display: none;
width: 100%;
transition: 1s ease-in;
}
.nav-ul ul{
flex-direction: column;
}
.nav-ul li{
text-align: center;
}
.nav-ul li a{
padding: .5rem 1rem;
}
.nav-ul.active{
display: flex;
flex-direction: column;
}
.nav-ul li{
animation-name: animateIn;
animation-duration: 350ms;
animation-delay: calc(var(--animation-order) * 100ms);
animation-fill-mode: both;
animation-timing-function: ease-in-out;
margin-top: 16px;
font-size: 1rem;
}
#keyframes animateIn {
0% {
opacity: 0;
transform: scale(0.6) translateY(-8px);
}
100% {
opacity: 1;
}
}
}
<nav class="container navbar">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<h1 style="color: white">LOGO</h1>
</div>
<div class="nav-ul nav-center">
<ul>
<li style="--animation-order: 1;">Home</li>
<li style="--animation-order: 2;">About</li>
<li style="--animation-order: 3;">People</li>
<li style="--animation-order: 4;">Menu</li>
<li style="--animation-order: 5;">Contact</li>
<li style="--animation-order: 6;">Reservations</li>
</ul>
</div>
<div class="icon">
<img src="heart.svg" alt="favorites">
</div>
</nav>

Full screen overlay menu with HTML,CSS,JavaScript

I am trying to make a full-screen overlay navigation menu. And I don't know what am I doing wrong.
So I am using a checkbox as a toggler for the fullscreen navigation menu. And also using a hamburger for the button.
This might have a small error that I don't seem to find but I am a beginner in this.
please help
this is Html code
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div>
</div>
</div>
</div>
<div class="fullpagemenu" id="menu">
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
<section class="landing">
<img src="./circles.svg" alt="dots">
<h1>Dots</h1>
</section>
<script type="text/javascript" src="/js/index.js"></script>
this is index.js. This is also working fine as it toggles the active class in fullpagemenu div
const toggler = document.querySelector(".toggler");
const menu = document.querySelector("#menu");
toggler.addEventListener("click", () => {
menu.classList.toggle("active");
});
this is index.css. Everything works fine when I set the top to 0 in fullpagemenu class.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
}
.fullpagemenu{
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.fullpagemenu .active{
top: 0%;
}
.fullpagemenu .nav{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow-y: auto;
}
.fullpagemenu .nav ul{
position: relative;
}
.fullpagemenu .nav ul li{
position: relative;
list-style: none;
padding: 0 20px;
margin: 5px 0;
overflow: hidden;
display: table;
}
.fullpagemenu .nav ul li:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: orange;
transition: transform 0.5s ease-in-out;
transform: scaleY(0);
transform-origin: bottom;
}
.fullpagemenu .nav ul li:hover:before{
transition: transform 0.5s ease-in-out;
transform: scaleY(1);
transform-origin: top;
}
.fullpagemenu .nav ul li a{
position: relative;
color: black;
text-decoration: none;
font-size: 4em;
font-weight: 700;
line-height: 1.2em;
padding-top: 12px;
display: inline-block;
text-transform: uppercase;
transition: 0.5s ease-in-out;
}
.fullpagemenu .nav ul li a:before {
content: attr(data-text);
position: absolute;
bottom: -100%;
left: 0;
color: black;
}
.fullpagemenu .nav ul li:hover a {
transform: translateY(-100%);
color: black;
}
.landing{
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.landing h1{
margin: 100px;
font-size: 50px;
color: purple;
}
/* MENU STYLES */
.menu-wrap {
position: fixed;
top: 10px;
right: 20px;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 10px;
right: 20px;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: orange;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: black;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}

you have a space between the .fullpagemenu .active and it should be: .fullpagemenu.active edit this and your code works:
const toggler = document.querySelector(".toggler");
const menu = document.querySelector("#menu");
toggler.addEventListener("click", () => {
menu.classList.toggle("active");
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
}
.fullpagemenu{
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.fullpagemenu.active{
top: 0;
}
.fullpagemenu .nav{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow-y: auto;
}
.fullpagemenu .nav ul{
position: relative;
}
.fullpagemenu .nav ul li{
position: relative;
list-style: none;
padding: 0 20px;
margin: 5px 0;
overflow: hidden;
display: table;
}
.fullpagemenu .nav ul li:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: orange;
transition: transform 0.5s ease-in-out;
transform: scaleY(0);
transform-origin: bottom;
}
.fullpagemenu .nav ul li:hover:before{
transition: transform 0.5s ease-in-out;
transform: scaleY(1);
transform-origin: top;
}
.fullpagemenu .nav ul li a{
position: relative;
color: black;
text-decoration: none;
font-size: 4em;
font-weight: 700;
line-height: 1.2em;
padding-top: 12px;
display: inline-block;
text-transform: uppercase;
transition: 0.5s ease-in-out;
}
.fullpagemenu .nav ul li a:before {
content: attr(data-text);
position: absolute;
bottom: -100%;
left: 0;
color: black;
}
.fullpagemenu .nav ul li:hover a {
transform: translateY(-100%);
color: black;
}
.landing{
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.landing h1{
margin: 100px;
font-size: 50px;
color: purple;
}
/* MENU STYLES */
.menu-wrap {
position: fixed;
top: 10px;
right: 20px;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 10px;
right: 20px;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: orange;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: black;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div>
</div>
</div>
</div>
<div class="fullpagemenu" id="menu">
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
<section class="landing">
<img src="./circles.svg" alt="dots">
<h1>Dots</h1>
</section>

Click checked pure hamburger menu on window/document click

This question may seem similar to other questions but my hamburger menu uses checkbox to function and shows up at 768px width and below and I've been running into issues trying to close the open hamburger menu when the window/document is clicked.
I successfully got it to work using several ways but it still doesn't work as intended. The hamburger menu closes on document click alright, but the hamburger menu no longer closes on hamburger menu click as it originally should.
I have very little knowledge of Javascript/Jquery but I understand the bits I used to make other parts of the code work, but I just can't figure out how to make this particular one work.
Below is the code required to recreate the problem:
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
$('.menu-btn').click();
}
});
});
//With vanilla JS
/* window.onclick = function(event) {
if (document.getElementById('menu-btn').checked) {
document.getElementById('menu-btn').click();
}
} */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>
Here is also a fiddle of the code.

Your issue is in this line:
$('.menu-btn').click();
It's enough you changed it to this:
e.preventDefault();
$('.menu-btn').click();
With the first line you prevent the default action while with the second you initiated the click event for the correct element.
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
e.preventDefault();
$('.menu-btn').click();
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>

Parallax.js inside Fullpage.js creating unexpected result on Mac Safari

I am using parallax js inside my fullpage.js slides. Its working fine everywhere except Mac Safari, here its overlapping the image while sliding to next slide and when the animation ended it comes back to its position.
Check the snippet below you can only get the bug on Mac Safari.
Can we fix this bug somehow ?
// 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: ['#B8AE9C', '#348899', '#F2AE72', '#5C832F', '#B8B89F'],
sectionSelector: '.vertical-scrolling',
slideSelector: '.horizontal-scrolling',
navigation: true,
slidesNavigation: true,
controlArrows: false,
anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'],
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)');
}
}
});
var scenes = [];
var scenesSelector = document.querySelectorAll('.scene');
for (i = 0; i < scenesSelector.length; i++) {
scenes[i] = new Parallax(scenesSelector[i]);
}
#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;
}
.fp-tableCell{
position: relative;
}
.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 3s;
transition: all 3s;
}
.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;
}
.col {
position: absolute;
width: 40%;
background: #fff;
height: 100vh;
top: 0;
left: 0;
z-index: 2000;
display: flex;
align-items: center;
}
.img img {
width: 100%;
}
/* 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;
}
#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;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.extensions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.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>
</header>
<div id="fullpage">
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>This is the first section</h3>
<div class="scroll-icon">
<p>Jump into the last slide</p>
</div>
</section>
<section class="vertical-scrolling shadow">
<h2>fullPage.js</h2>
<h3>This is the second section</h3>
<p class="img scene"><img data-depth="0.8" src="https://via.placeholder.com/350x150" alt=""></p>
<div class="col">
<h2>Column</h2>
</div>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>This is the third section</h3>
</section>
</div>

If the parallax library you want to use relies on the scroll event or position, then you'll need to make use of the fullPage.js option scrollBar:true.