We Keep Coding

Why does it work in Safari but not in Chrome?

This HTML with simple CSS and JS works perfectly in Safari, but in Chrome (both Mac and Win) it does not work at all, does not even scroll... not sure the is JS, or the CSS or both.
I tried to change the script or the CSS but nothing works.
Please help 🙏
https://codepen.io/sinetempore/pen/oNwNKZr
Here is my HTML and my CSS:
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 100) {
$('.p1, .p2').addClass('hide');
} else {
$('.p1, .p2').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1200) {
$('.p3').addClass('hide');
$('.p2').removeClass('hide');
} else {
$('.p3').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1800) {
$('.p3-text, .p3sottocntr, .p-main.p4-text').addClass('hidefoot');
} else {
$('.p3-text, .p3sottocntr, .p-main.p4-text').removeClass('hidefoot');
}
});
/// Scroll back to top
$("a[href='.parallax']").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
#charset "utf-8";
* {
margin: 0;
}
body {
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
font-family: MuseoSans_700;
}
a {
color: black;
text-decoration: none;
}
/* ---------- LOGO ----------*/
.logo-p1 {
overflow: hidden;
border: 0px solid red;
width: 120px;
height: 45px;
background-color: white;
position: absolute;
top: calc(50% - 22.5px);
left: calc(50% - 60px);
margin: 0;
}
.logo-p2 {
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
.logo-p3 {
transform: rotate(180deg);
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
/* ---------- PARALLAX ----------*/
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: static;
background: rgba(255, 0, 0, 0);
z-index: 2;
}
.speed-1 {
transform: translateZ(-6px) scale(7);
}
/* ---------- SECTIONS ----------*/
.p1 {
height: 100%;
width: 100%;
position: absolute;
display: block;
z-index: 3;
background: white;
opacity: 1;
transition: all 0.9s ease;
}
.p1.hide {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p2 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p2.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p3.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p-main.p4-text.hidefoot {
width: 100%;
height: 250px;
background-color: black;
/* position: relative; */
left: 0px;
margin: auto;
bottom: 250px;
}
.p-main.p4-text {
width: 100%;
height: 0px;
background-color: black;
position: fixed;
left: 0px;
margin: auto;
bottom: 0px;
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
transition: all 0.9s;
transform: translateY(250px);
transform-origin: bottom;
}
.p4 {
height: auto;
width: 100%;
position: relative;
display: block;
z-index: -1;
}
.p4.hidefoot {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
/* ---------- TESTO SECTIONS ----------*/
.p-main {
width: 355px;
height: 230px;
background-color: transparent;
position: fixed;
bottom: 40px;
left: 40px;
margin: 0;
display: flex;
justify-content: left;
align-items: flex-end;
border: 0px solid red;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
}
.p3-text {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3-text.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p-desc {
line-height: 16px;
}
.p-desc b {
font-family: MuseoSans_700;
font-weight: normal;
}
.p-col {
margin-top: 20px;
column-count: 2;
line-height: 16px;
font-family: MuseoSans_700;
}
/* ---------- MENU SOTTO ----------*/
.sottocentro {
width: 250px;
height: 140px;
background-color: transparent;
position: fixed;
bottom: 40px;
right: calc(0% - 0px);
margin: 0;
display: -webkit-box;
justify-content: center;
align-items: flex-end;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
border: 0px solid red;
right: 40px;
}
.p3sottocntr {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3sottocntr.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.sottocentro ul {
list-style: none;
text-align: right;
width: auto;
border: 0px solid red;
line-height: 16px;
text-decoration: none;
clear: both;
margin: 0;
padding: 0px;
right: 40px;
position: absolute;
right: 0px;
position: absolute;
bottom: 0px;
}
.sottocentro ul li {
border: none;
text-align: right;
width: auto;
}
.sottocentro ul li.begins {
border: none;
text-align: right;
width: auto;
padding: 30px 0 0 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<section class="p1 speed-1">
<div class="logo-p1">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
</section>
</div>
<section class="p2">
<div class="logo-p2">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p2-text">
<div>
<p class="p-desc p2-desc"> <b>Lorem ipsum </b>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
</p>
</div>
</div>
</section>
<section class="p3">
<div class="logo-p3">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p3-text">
<div>
<p class="p-desc p3-desc"> <b>Sed ut perspiciatis </b>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
</section>
<section class="p4">
<div class="p-main p4-text">
</div>
</section>
</body>
</html>

Why doesn't my accordion toggle when clicking on the heading icons?

Need some assistance with below accordion. When you click on the heading the accordion drops down, which is great and works well. However, when you click on the + / - the accordion doesn't dropdown. Not sure how to fix this and would greatly appreciate if someone to help. Not entirely sure how to amend the before/after so it's clickable.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

Adding pointer-events:none to your span will work for you like so :-
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
pointer-events:none;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>
Explanation - Did this because your e.target needs to match with a specific selector but your e.target will vary based on where you click and it becomes this span when you click on the +/- icons. So I have prevented the pointer-events for that span. I like the closest approach as well by #espascarello.

The target is what you clicked. The + is not the element you are looking for, so you got to see if it is a child. Easiest way is closest.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
const clickedElem = e.target.closest(elem+' .a-btn');
if (!clickedElem) return;
else{
if(!clickedElem.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
clickedElem.parentElement.classList.add('active');
}else{
clickedElem.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

Hamburger Menu Not Visible

I have pieced together a portfolio website using several tutorials and I can't figure out why the hamburger menu is not visible as it downsizes. It works fine when I take out the main content in the HTML with the sections, but if there is any main content then the burger menu does not appear.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Portfolio</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<main>
<div class="about-area" id="about">
<div class="text-part">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="portfolio-area" id="portfolio">
<div class="text-part">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="contact-area" id="contact">
<div class="text-part">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>
CSS:
* {
margin: 0px; /* Remove unwanted inherent sizing */
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav {
display: flex; /*icons are next to each other */
justify-content: space-around; /* */
align-items: center; /* Center items vertically */
min-height: 8vh;
background-color: #0e9763;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex; /* spreads out text */
justify-content: space-around; /* using flex adds more space around the items using width */
width: 30%;
}
.nav-links li {
list-style: none; /* Removes bullet points */
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none; /* Removes default link colors */
letter-spacing: 3px;
font-size: 14px;
}
.burger {
display: none; /* Hides the burger menu */
cursor: pointer;
}
.burger div { /*the details of the burger menu bars design */
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
/* Main Area Content */
.about-area, .portfolio-area, .contact-area {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 700px;
}
.text-part {
width: 65%;
height: 80%;
}
h1 {
font-size: 50px;
font-family: 'Audiowide', cursive;
}
p {
font-size: 24px;
line-height: 50px;
}
.about-area {
background: #fefefe;
}
.portfolio-area {
background: #0e9763;
color: #fff;
}
.contact-area {
background: #fefefe;
}
html {
scroll-behavior: smooth;
}
a:hover {
color: #000;
}
/* Quick fix breakpoint between max size and hamburger menu trigger */
#media screen and (max-width:1024px){
.nav-links {
width: 60%;
}
}
#media screen and (max-width:768px){
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #0e9763;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%); /* Moves content off screen */
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%); /* When button is clicked the nav gets the transform */
}
/* Nav animation */
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JS:
const navSlide = () => { //navSlide is = to an anonymous function
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',() => { //on click run a function
//Toggle Nav
nav.classList.toggle('nav-active');
//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');
});
}
//Invoke function
navSlide();
Here is a link to the codepen:
https://codepen.io/justadirtgrub/pen/NWGJrde

You need to add z-index css property to class .nav-active to show up in front of main content
const navSlide = () => {
//navSlide is = to an anonymous function
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener("click", () => {
//on click run a function
//Toggle Nav
nav.classList.toggle("nav-active");
//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");
});
};
//Invoke function
navSlide();
* {
margin: 0px; /* Remove unwanted inherent sizing */
padding: 0px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex; /*icons are next to each other */
justify-content: space-around; /* */
align-items: center; /* Center items vertically */
min-height: 8vh;
background-color: #0e9763;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex; /* spreads out text */
justify-content: space-around; /* using flex adds more space around the items using width */
width: 30%;
}
.nav-links li {
list-style: none; /* Removes bullet points */
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none; /* Removes default link colors */
letter-spacing: 3px;
font-size: 14px;
}
.burger {
display: none; /* Hides the burger menu */
cursor: pointer;
}
.burger div {
/*the details of the burger menu bars design */
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
/* Main Area Content */
.about-area,
.portfolio-area,
.contact-area {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 700px;
}
.text-part {
width: 65%;
height: 80%;
}
h1 {
font-size: 50px;
font-family: "Audiowide", cursive;
}
p {
font-size: 24px;
line-height: 50px;
}
.about-area {
background: #fefefe;
}
.portfolio-area {
background: #0e9763;
color: #fff;
}
.contact-area {
background: #fefefe;
}
html {
scroll-behavior: smooth;
}
a:hover {
color: #000;
}
/* Quick fix breakpoint between max size and hamburger menu trigger */
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #0e9763;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%); /* Moves content off screen */
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
z-index: 100; /* When button is clicked the nav gets the transform */
}
/* Nav animation */
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Portfolio</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<main>
<div class="about-area" id="about">
<div class="text-part">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="portfolio-area" id="portfolio">
<div class="text-part">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
<div class="contact-area" id="contact">
<div class="text-part">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
optio officia suscipit nemo natus!</p>
</div>
</div>
</main>
</body>
</html>

What element can make the background:url(); to not display image

I am trying to add the following effect in one of the divs of my website:
https://www.youtube.com/watch?v=o8DTzU0Iol8
I have done everything from the video, yet the background images of .container_page_1 .column.active .bg.bg1 2,3, and 4 don't show up even with full path and the jQuery doesn't work as well.
I am sure that the thing that causes these issues is that I've added the code from the tutorial in a div that's not directly in the body, it's in other div, that's in another div.
I will paste all the code of the page, both HTML and CSS and also link a code pen, because I do not know what part of the code is faulty...
This is a live codepen: Codepen
I've separated my website into 3 pages. I've added a parallax effect on the first page and I've tried adding the effect from the video tutorial into the second page.
I also have a reset.css file that's just too big to add here. I've found it online. Without the reset.css the codepen will have a margin at the top through which you can see the background image that should have been on .container_page_1 .column.active .bg.bg1.
What do you think ?
$(document).on('mouseover', 'container_page_1 .column', function() {
$(this).addClass('active').siblings().removeClass('active');
})
// eliminate scroll-bar
var child = document.getElementById('child-container');
child.style.right = child.clientWidth - child.offsetWidth + "px";
/* *** index.html - START *** */
body, html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
#parent-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px; /* exact value is given through JavaScript */
overflow: auto;
scroll-snap-type: both proximity;
}
header {
height: 100%;
background-image: url("https://i.postimg.cc/V671cpsf/ps4-controller-min.jpg");
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
scroll-snap-align: center;
}
header h1 {
font-size: 32px;
font-weight: bold;
position: sticky;
top: 5%;
margin-bottom:10px;
}
header p {
position: sticky;
width: 450px;
text-align: center;
margin: auto;
margin-top: 100px;
}
.container_page_1 {
width: 100%;
height: 100vh;
/* background-color: red; */
scroll-snap-align: center;
overflow: hidden;
}
.container_page_1 .column {
width: 25%;
height: 100%;
float: left;
border-right: 2px solid rgba(0, 0, 0, 0.5);
box-sizing: border-box;
z-index: 1;
}
.container_page_1 .column:last-child {
border-right: none;
}
.container_page_1 .column .content {
position: relative;
height: 100%;
}
.container_page_1 .column .content h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
background: rgba(0, 0, 0, .1);
text-align: center;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, .2);
font-size: 15em;
border-top: 2px solid rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}
.container_page_1 .column .content .box {
position: absolute;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 40px;
background: rgba(255, 255, 255, 1);
text-align: center;
transition: 0.5s;
opacity: 0;
}
.container_page_1 .column.active .content .box {
opacity: 1;
}
.container_page_1 .column .content .box h2 {
margin: 0;
padding: 0;
font-size: 30px;
color: #262626;
}
.container_page_1 .column .content .box p {
color: #262626;
font-size: 18px;
}
.container_page_1 .column .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.container_page_1 .column.active .bg.bg1 {
background: url('https://i.postimg.cc/ZRYZ24Ss/ac-odyssey-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg2 {
background: url('https://i.postimg.cc/x8h2XmbB/borderlands-3-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg3 {
background: url('https://i.postimg.cc/1RjPCkYM/god-of-war-4-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg4 {
background: url('https://i.postimg.cc/qqzrBwg8/sw-jedi-fallen-order-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_2 {
width: 100%;
height: 100%;
background-color: green;
scroll-snap-align: center;
}
/* *** index.html - END *** */
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div id="parent-container">
<div id=child-container>
<header>
<a href="#page2">
<h1 id="sticky-title">ACG - Gaming and e-Sports News</h1>
</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi debitis in libero tenetur suscipit iusto eum nulla dolorum aperiam adipisci unde veritatis vel iure, a nam, saepe exercitationem illum vitae.</p>
</header>
<div id="page2" class="container_page_1">
<div class="column active">
<div class="content">
<h1>1</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg1"></div>
</div>
<div class="column">
<div class="content">
<h1>2</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg2"></div>
</div>
<div class="column">
<div class="content">
<h1>3</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg3"></div>
</div>
<div class="column">
<div class="content">
<h1>4</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg4"></div>
</div>
</div>
<div class="container_page_2">
</div>
</div>
</div>

Navigation menu keeps pushing down elements when opened. Why?

important note before I even ask the question: It was much shorter and simpler for me (therefore you too) to just show the CSS part regarding media queried, because it would be too much useless code/info otherwise. Meaning - please resize your browser to the size mentioned in CSS (width 480px or less) to see what I'm talking about. And no I'm not using bootstrap for this...
My question is next: How am I supposed to make my "hamburger" menu overlay the content (opened onclick) and not push it down?
Even better if it can be done without any JS but remember, sliding effects or easing in/out - not stuff im looking for.
Here is the snippet:
function myFunction() {
var x = document.getElementById("menu");
if (x.style.display === "block") {
x.style.display = "none";
}
else {
x.style.display = "block";
}
}
#media only screen and (max-width: 480px) {
.networks, .sidenav, .image-row, .foot1, .foot3 {
display: none;
}
body {
display: block;
width: 100%;
height: 100%;
background-color: #e1e1e1;
}
.page-wrap {
display: block;
margin-top: 0px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.logo {
display: inline-block;
float: left;
width: 75%;
margin-left: 2.5%;
}
.logoImg {
width: 200%;
}
.menuIcon {
display: inline-block;
float: right;
width: 10%;
margin-top: 6%;
margin-right: 5.5%;
border: none;
z-index: 3;
}
.navButton {
display: block;
width: 100%;
background-color: #e1e1e1;
border: none;
z-index: 3;
}
.navButton:focus {
outline: none;
}
#menu {
display: none;
position: relative;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 2.5%;
padding-bottom: 2.5%;
z-index: 3;
}
.main {
display: block;
width: 90%;
height: auto;
padding-bottom: 7.5%;
margin-top: 2.5%;
margin-left: 5%;
margin-right: 5%;
z-index: 1;
}
.textbox {
display: block;
width: 95%;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
font-size: 1.25em;
text-align: justify;
}
.myPhoto {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.foot2 {
display: block;
width: 100%;
padding-top: 5%;
padding-bottom: 5%;
font-size: 1.25em;
color: #324B64;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<script src="myScript.js"></script>
<title>Luka Novak</title>
</head>
<body>
<div class="page-wrap">
<div class="header">
<div class="logo">
</div>
<div class="networks">
<img src="facebook-symbol.svg" class="socialnet" alt="facebook">
<img src="instagram-symbol.svg" class="socialnet" alt="instagram">
</div>
<div class="menuIcon">
<button onclick="myFunction()" class="navButton">
<img src="https://cdn3.iconfinder.com/data/icons/gray-toolbar/512/menu-512.png"
alt="menu"
class="iconImg">
</button>
</div>
</div>
<div class="sidenav col-5" id="menu">
about us
services
contact
</div>
<div class="main col-18">
<article class="textbox">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</article>
<div class="image-row">
<div class="image1">
</div>
<div class="image2">
</div>
<div class="image3">
</div>
</div>
</div>
<div class="footer col-24">
<p class="foot1">Some info</p>
<p class="foot2">design by me</p>
<p class="foot3">More info</p>
</div>
</div>
</body>
</html>
And in case that the snippet looks weird (as in jsfiddle, plus not registering menu being clickable at all), here is CodePen link: https://codepen.io/anon/pen/VxmMrJ
(remember to resize the window in codepen too)

Change your position from relative to absolute on the menu id and and change the margin-top to maybe 20%; this should move the menu on top of your information.
Cheers Mate.

Check this code pen link
When you click the button, make its position absolute.This way, it will not interfere with the opened menu.
Add this to your css
.menu-button-enable{
position: absolute;
top: 0px;
right: 0px;
z-index: 4;
}
Add this to js
function myFunction() {
var x = document.getElementById("menu");
var mButton = document.querySelector(".menuIcon");
if (x.style.display === "block") {
x.style.display = "none";
mButton.classList.remove("menu-button-enable");
}
else {
x.style.display = "block";
mButton.classList.add("menu-button-enable");
}
}

The way to layer content on top of each other is by given it the position: absolute;. With that, and some positioning, you can position your menu on top of your content, like so:
Just replace this with the #menu rule in your media-query for 480px and it will work :)
#menu {
position: absolute;
display: none;
width: 90%;
top: 15%;
left: 0;
right: 0;
margin: auto;
height: auto;
z-index: 3;
}