We Keep Coding

Javascript eventListener only working in some areas of the element

So i was building a burger menu responsive navbar. I finished up most of the working but i got stuck at one point. The problem is i have applied the javascript onClick event listener on the div .burger so that it changes the opacity of the .nav-container to 1. Up until to this point this works fine. The problem is this click event only works in some areas on the .burger. Like if clicked on of the lines in it or somewhere to the right. I can't seem to find the problem. Can someone help me with this? Thanks in advance.
Here is my code
function showNav() {
var nav = document.getElementById("nav");
nav.classList.add("show-nav");
}
* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
li {
flex: 1;
padding: 15px;
}
}
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}
<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>

Just put z-index = 1 on .burger.
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
z-index: 1;
}

to bring your menu up front , you can add position:relative + z-index:1; to make sure it stands on top.
You also add the rule cursor: pointer; to show it is a clickable element :)
For the class you add, you could use classList . toggle() , so it shows/hides alternatively.
example
function showNav() {
var nav = document.getElementById("nav");
nav.classList.toggle("show-nav");
}
* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
cursor: pointer;
position:relative;
z-index:1
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
}
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
}
li {
flex: 1;
padding: 15px;
}
li a {
color: black;
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}
<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>

Just change the width of
.nav-container {
width: 30%;
}
so it doesn't overlap the burger. In general your CSS structure is not good.

How to overlay a nav bar/burger over a image slide show

I have a home page with a responsive navbar. When you shrink the size of the window, it collapses into a burger for mobile/tablet, which then shows the menu options vertically down the right-hand side of the page.
The home page also has an image slide show that runs automatically that is in the centre of the page.
When the window size reduces i.e to mobile size and it collapses into a burger, I can't see some of the menu options over the image slide show. Any ideas on how to accomplish this? I am a newbie to HTML, CSS & also JS... any help much appreciated (:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/style.css" rel = "stylesheet" type="text/css" >
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300&display=swap" rel="stylesheet">
<script> src="app.js"</script>
<title>Rogue Concept</title>
</head>
<body>
<!-- Navigation Menu Bar-->
<nav>
<div class="logo">
<h4>Rogue Concept</h4>
</div>
<ul class="nav-links">
<li>Home
</li>
<li>
About Us
</li>
<li>
Restoration
</li>
<li>
Hire
</li>
<li>
Contact Us
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!--image slider start-->
<div class="slider">
<div class="slides">
<!--radio buttons start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first">
<img src="assets/img/grant-ritchie-j0YPbvXu4t0-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/grant-ritchie-jYk96oRbPwg-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jan-de-keijzer-8eudveAaeFU-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jon-flobrant-lRSChvh1Mhs-unsplash.jpeg" alt="" class="center">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
<!--manual navigation end-->
</div>
<!--image slider end-->
<script src="assets/app.js"></script>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* Navigation Tool Bar Start */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: whitesmoke;
font-family: 'Oswald', sans-serif;
}
.logo {
color: black;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
/* Navigation Tool Bar End */
/* Mobile Nav Tool Bar Start */
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color : black;
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: whitesmoke;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.nav-active {
transform: translateX(0%);
}
}
/* Mobile Nav Tool Bar End */
/* Animation Start */
#keyframes navLinkFade{
from{
opacity: 0;
transfrom: 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);
}
.slider {
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slides {
width: 500%;
height: 500px;
display: flex;
}
.slides input{
display: none;
}
.slide {
width: 20%;
transition: 2s;
}
.slide img {
width: 800px;
height: 500px;
}
/*css for manual slide navigation*/
.navigation-manual {
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child) {
margin-right: 40px;
}
.manual-btn:hover {
background: whitesmoke;
}
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}
/*css for automatic navigation*/
.navigation-auto {
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child) {
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1 {
background: whitesmoke;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
background: whitesmoke;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
background: whitesmoke;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
background: whitesmoke;
}
app.js
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',() => {
//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 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();

You can use Z-index in CSS for superimpose elements.
Example:
nav{
z-index: 1000;
}

Toggle nav menu when clicked on nav links or outside

I have been trying to make my mobile navigation menu to toggle back when I click outside the navigation links or when I click on one of them. I have looked around and I only find jQuery example which I'm avoiding. I want to have an example with JavaScript ES6. So, how can I make it work?
Here is my code:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
})
}
navSlide();
html {
scroll-behavior: smooth;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Gelion;
background-color: #fa555204;
}
.nav-links li a, .logo {
text-decoration: none;
}
ul {
list-style: none;
}
.main-nav {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
height: 10%;
padding: 20px 0;
}
.nav-links {
display: flex;
}
.nav-links li {
padding: 0 15px;
}
.burger{
display: none;
}
/* Media Query - Mobile */
#media only screen and (max-width: 700px) {
body {
overflow-x: hidden;
}
/* Burger Menu */
.nav-links {
position: fixed;
right: 0;
height: 100vh;
width: 60%;
top: 0vh;
background-color: var(--secondary-color);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.5s ease-in;
z-index: 1;
}
.nav-links li a {
color: #fff;
}
.nav-active {
transform: translateX(0%);
}
.main-nav .burger {
display: block;
cursor: pointer;
font-size: 35px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<nav class="main-nav">
<a href="#" class="logo" />Logo</a>
<ul class="nav-links">
<li>Overview</li>
<li>Contagion</li>
<li>Symptoms</li>
<li>Prevention</li>
<li>Contact</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</nav>

you can use css very easy for this Using :focus Selector
checkout this link : https://www.w3schools.com/cssref/sel_focus.asp
or try this
.classname:focus{
//your code here will run while client focused in this class
}

Navbar Logo pushing down other Navbar Links

I've followed a youtube tutorial at [https://www.youtube.com/watch?v=H4MkGzoACpQ] to create a nice responsive Navbar.
The problem is when I try and personalise it and add a logo on the left side of the Nav, it seems to push the other nav links off the navbar when viewed in full screen.
As well as that, when the viewport goes below a certain width, there seems to be a circle visible around the hamburger icon.
Please help me to clean up this Navbar. Many thanks, I'm just a beginner at web design.
Here is a link to what the logo should be also - [https://www.google.com/search?q=rossnowlagh+surf+school+logo&sxsrf=ALeKk00Hg24OG5c7Wefc6jal-JyqLmB18Q:1586961567476&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjxpYHE1OroAhXXiVwKHQi3CEsQ_AUoAXoECAwQAw&biw=1440&bih=789#imgrc=36AEO3-lo_sGxM]
I've included my HTML, CSS and JS code here...
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
nav {
height: 12vh;
background: #5b78c7;
}
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
}
.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.nav-links li a {
color: white;
text-decoration: none;
font-size: 16px;
}
.landing {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.landing h1 {
margin: 100px;
font-size: 50px;
color: #ae5fce;
}
#media screen and (max-width: 768px) {
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links {
position: fixed;
background: #5b78c7;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 90% -10%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.landing {
flex-direction: column;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
li.fade {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Rossnowlagh Surf</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<img id="nav-logo" src="img/rossnowlagh-logo.png">
<ul class="nav-links">
<li>About</li>
<li>Packages</li>
<li>Contact</li>
</ul>
</nav>
<section class="landing">
<img src="./circles.svg" alt="dots" />
<h1>Dots</h1>
</section>
<script src="app.js"></script>
</body>
</html>

What's happening here is that your nav logo is taking up space, and is pushing things off the screen in a way that is breaking the layout.
There are probably a few ways to address this, including using a flexbox and arranging the items for your nav inside it, but I think that the following option is probably going to be the simplest for your task:
#nav-logo
{
padding-top: 5px;
margin-left: 20px;
height: 80px;
width: 80px;
position: absolute; // add this to take the logo out of the layout
z-index: 5; // add this to keep the logo in front of the other content
}

Issues with making a Nav-Menu go away upon clicking a link

so I'm having issues with closing my mobile nav hamburger menu when a link is clicked. Only my top link is clickable right now just FYI.
The answer is on the tip of my tongue but I'm not quite there. I think mainly it's a syntax issue on my end. So yes the menu on mobile opens and closes when clicking the menu, but it doesn't close when a link is clicked.
I've looked all over, but all I could find were jQuery answers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css\style.css">
<title>eddiepearsonUX</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>Audio UX Study</li>
<li>Web App UX</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro-section">
<h1 class="name">
<span>eddie</span>
<span>Pearson</span>
</h1>
<h3 class="intro">
<p>Audio<br>and Visual</p>
<p>UX</p>
</h3>
</section>
<h3 class="content-title">
<p>Audio UX Study</p>
</h3>
<ul style="list-style-type: none" id="Audio-UX-Study"class="content">
<li class="main-img"><img src="https://www.dl.dropboxusercontent.com/s/rktj2nhj07l2ne7/20191206-Screenshot%20%28223%29.jpg?dl=0" alt="Ableton screen with wavforms and effects stack"></li>
<li class="second-img"><img src="https://www.dl.dropboxusercontent.com/s/j1aipb71ccj3o64/Screenshot%20%28225%29.png?dl=0" alt="Wavforms from audio"></li>
<li class="copy">
</li>
<li class="main-img"></li>
<li class="second-img"></li>
<li class="copy">
</li>
</ul>
<script src="js\app.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Merriweather', serif;
}
body {
font-family: sans-serif;
background-color: #e6e6e0;
}
/* NAVIGATION */
nav {
height: 10vh;
background: #e6e6e0;
/* position: sticky; */
}
.name-div {
position: absolute;
width: 50%;
top: 1.8rem;
left: 2rem;
}
.name {
color: rgb(82, 82, 56);
font-size: calc(0.2rem + 1.1rem);
}
.nav-links {
display: flex;
position: relative;
list-style: none;
max-width: 75vw;
height: 100%;
justify-content: end;
align-items: center;
margin: auto;
}
.nav-links li a {
color:rgb(82, 82, 56);
font-weight: bold;
text-decoration: none;
font-size: 18px;
padding-left: 1em;
}
#media screen and (max-width: 768px) {
.nav-links {
position: fixed;
background: #e6e6e0;
height: 100vh;
width: 100%;
flex-direction: column;
justify-content: space-around;
margin-left: auto;
clip-path: circle(100px at 90% -20%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1100px at 90% -10%);
-webkit-clip-path: circle(1100px at 90% -10%);
pointer-events: all;
max-width: 95%;
}
.line {
width: 30px;
height: 3px;
background: rgb(82, 82, 56);
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links li {
opacity: 0;
}
.nav-links a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.1s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
}
/* INTRO SECTION */
.intro-section {
max-width: 75vw;
margin: auto;
/* background-color: #fff; */
}
.intro-section .name {
padding: 2rem 0 2rem 0rem;
font-size: calc(0.8rem + 3vw);
}
.intro-section .name span:nth-of-type(1) {
color: rgb(174, 177, 156);
}
.intro {
color:rgb(174, 177, 156);
font-size: calc(0.6rem + 2vw);
}
.intro p:nth-of-type(2) {
font-size: calc(0.6rem + 3vw);
color:rgb(82, 82, 56);
}
/* CONTENT SECTION */
.content-title {
display: block;
margin: auto;
margin-top: 5rem;
margin-bottom: 2rem;
max-width: 75vw;
font-size: calc(0.6rem + 1vw);
color:rgb(82, 82, 56);
}
.content {
max-width: 75vw;
margin: 3rem auto;
display: grid;
width: 100%;
height: auto;
display: grid;
margin-bottom: 3em;
grid-gap: 1em;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.main-img {
grid-column: 1 / 2;
}
.content > li > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});

The only thing you're listening for clicks on is the hamburger element.
Try adding a listener on the navLinks element, like so:
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
navLinks.addEventListener('click', () => {
navLinks.classList.toggle('open')
links.forEach(link => {
link.classList.toggle('fade');
});
})
There might be more tweaks you need to make, but this should get you started.