Hello my Burger Menu does not open when i resize the browser. I tried many different thinks and nothing worked. Also theres a weird second right after you resize the window where the menu opens for a split second
Error : Uncaught TypeError: Cannot read property 'toggle' of undefined at HTMLDivElement.burger.addEventListener
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navul');
burger.addEventListener('click', () => {
nav.classlist.toggle('nav-active');
});
}
navSlide();
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: red;
font-family: 'Poppins', sans-serif;
font-weight: 400;
}
.logo {
color: white;
letter-spacing: 6px;
text-transform: uppercase;
font-size: 20px;
}
.navul {
display: flex;
width: 45%;
color: white;
list-style: none;
justify-content: space-around;
}
.navul a {
text-decoration: none;
color: white;
letter-spacing: 2px;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
color: white;
margin: 5px;
background-color: white;
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navul {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navul li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
<section id="01">
<nav class="navigation">
<div class="logo">
<h4>Spieker Manufaktur</h4>
</div>
<ul class="navul">
<li>Home</li>
<li>Über Uns</li>
<li>Produkte</li>
<li>Herstellung</li>
</ul>
<div class="burger">
<div class="line01"></div>
<div class="line02"></div>
<div class="line03"></div>
</div>
</nav>
</section>
Related
I am creating a website and there seems to be a problem with the hamburger menu.
I have a basic hamburger navbar but I have to hold the hamburger icon to activate the hamburger menu. Still, the nav menu doesn't appear after clicking/holding the hamburger icon!
const hamburger = document.getElementsByClassName('hamburger-menu')[0];
const navLinks = document.getElementsByClassName('navlinks')[0];
hamburger.addEventListener('click', () => {
hamburger.classlist.toggle("open");
navLinks.classlist.toggle("open");
});
#import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Plus Jakarta Sans", sans-serif;
}
body {
background-color: #f2e5d7;
}
a {
text-decoration: none;
}
.navbar {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #3a3e59;
box-shadow: 1px 1px 7px 4px grey;
}
.logo {
width: 50%;
display: flex;
align-items: center;
}
.logo img {
border-radius: 50%;
width: 4rem;
}
.nkc {
margin-left: 20px;
font-weight: 600;
letter-spacing: 1.5px;
font-size: 17px;
}
.hamburger-menu {
display: none;
transition: 0.3s ease-in-out;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background-color: #f75435;
margin: 2.5px;
}
.navlinks {
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
top: 95px;
position: fixed;
right: -100%;
background-color: #3a3e59;
padding: 1rem 3.5rem;
height: 20%;
transition: all 0.3s ease-in-out;
}
.navlinks li a {
color: #f75435;
font-size: 17px;
}
.hamburger-menu.open .bar:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger-menu.open .bar:nth-child(2) {
opacity: 0;
}
.hamburger-menu.open .bar:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.navlinks.open {
right: 1rem;
}
#media screen and (max-width: 768px) {
.hamburger-menu {
display: flex;
flex-direction: column;
}
}
<body>
<header class="header">
<nav class="navbar">
<div class="logo">
<img src="assets/logo.jpg" alt="Nikhil Codes">
<h5 class="nkc">Nikhil Codes</h5>
</div>
<ul class="navlinks">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Contact</li>
</ul>
<div class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
<script src="scripts.js"></script>
</body>
Just a bunch of syntax errors and issues with your CSS. I've edited them and marked up the changes I've made below.
//added the code to the onload event so you can put the script wherever you like and not be restricted to putting it at the end of your html
window.onload = () => {
const hamburger = document.querySelector('.hamburger-menu'); //Changed this to querySelector so you don't need to get the 1st item
const navLinks = document.querySelector('.navlinks'); //ditto
hamburger.addEventListener('click', () => {
hamburger.classList.toggle("open"); //Was classlist, not classList (note the capital L)
navLinks.classList.toggle("open");
});
}
#import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Plus Jakarta Sans", sans-serif;
}
body {
background-color: #f2e5d7;
}
a {
text-decoration: none;
}
.navbar {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #3a3e59;
box-shadow: 1px 1px 7px 4px grey;
color: white;
/* added a colour here so I could see what's going on' */
}
.logo {
width: 50%;
display: flex;
align-items: center;
}
.logo img {
border-radius: 50%;
width: 4rem;
}
.nkc {
margin-left: 20px;
font-weight: 600;
letter-spacing: 1.5px;
font-size: 17px;
}
.hamburger-menu {
/* display: none; */
display: flex;
/*changed this to display flex to stack the bars on top of each other */
flex-direction: column;
/*stack the bars using this */
transition: 0.3s ease-in-out;
cursor: pointer;
}
.bar {
display: inline-block;
/*added this to make the width & height attributes effective */
width: 25px;
height: 3px;
background-color: #f75435;
margin: 2.5px;
}
.navlinks {
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
top: 95px;
position: fixed;
right: -100%;
background-color: #3a3e59;
padding: 1rem 3.5rem;
height: fit-content;
/* changed this to fit content as the menu spills out of the bottom at small screen heights */
transition: all 0.3s ease-in-out;
}
.navlinks li a {
color: #f75435;
font-size: 17px;
}
.hamburger-menu.open .bar:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger-menu.open .bar:nth-child(2) {
opacity: 0;
}
.hamburger-menu.open .bar:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.navlinks.open {
right: 1rem;
}
#media screen and (max-width: 768px) {
.hamburger-menu {
display: flex;
flex-direction: column;
}
}
<header class="header">
<nav class="navbar">
<div class="logo">
<img src="assets/logo.jpg" alt="Nikhil Codes">
<h5 class="nkc">Nikhil Codes</h5>
</div>
<ul class="navlinks">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Contact</li>
</ul>
<div class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
I'm trying to create a hamburger menu which slides out with an animation. I tried adding transform in the y axis but it doesn't slide out with an animation. The links has underline too. I added text-decoration: none but the link still has underline. what am I doing wrong in my code for these two errors?
codesandbox
<template>
<nav>
<div class="brand">brandName</div>
<ul class="nav-links" :class="'nav-links--' + isOpen">
<li v-for="(list, $index) in navLinks" :key="$index">
<a :href="list.link">{{ list.name }}</a>
</li>
<li id="button-part">
<button>Hello</button>
</li>
</ul>
<div #click="mobileNav()" class="burger">
<i class="fa fa-bars"></i>
</div>
</nav>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
current: 0,
isOpen: "closed",
navLinks: [
{
name: "Home",
link: "/home",
},
{ name: "About", link: "/about" },
{
name: "Contacts",
link: "/contact",
},
],
};
},
methods: {
mobileNav() {
if (this.isOpen === "closed") {
this.isOpen = "open";
} else {
this.isOpen = "closed";
}
console.log(this.isOpen);
},
},
};
</script>
<style>
ul.nav-links li {
list-style: none;
text-decoration: none;
}
nav {
display: flex;
justify-content: space-around;
background-color: grey;
height: 20px;
width: 100%;
margin: 0;
padding: 0;
text-decoration: none;
}
.brand {
margin-left: 2px;
}
ul.nav-links {
text-decoration: none;
position: absolute;
display: flex;
flex-direction: column;
border-top: solid 1px black;
width: 100%;
top: 10px;
background-color: red;
align-items: center;
opacity: 0.8;
transition: transform 5s;
transform: scaleY(1);
}
.nav-links--open {
display: block;
transform: scaleY(1);
}
.nav-links--closed {
display: none !important;
transform: scaleY(0);
}
.burger {
display: block;
}
#button-part {
margin-top: 2px;
}
#media (min-width: 768px) {
.brand {
margin-left: 5px;
}
ul.nav-links {
position: absolute;
display: flex;
flex-direction: row;
border-top: solid 1px black;
align-items: center;
justify-content: center;
width: 100%;
top: 10px;
background-color: red;
opacity: 0.8;
transition: transform 0.5s ease-in;
color: white;
text-decoration: none;
}
.nav-links--open {
display: block;
}
.nav-links--closed {
display: none !important;
}
ul.nav-links li {
opacity: 1;
padding: 0 25px;
text-decoration: none;
}
.burger {
display: block;
color: black;
}
}
#media (min-width: 1200px) {
nav {
background-color: red;
display: flex;
justify-content: space-around;
}
.brand {
display: flex;
align-items: center;
color: black;
font-size: 20px;
margin-left: 20px;
}
ul.nav-links {
position: static;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
border: none;
text-decoration: none;
padding-top: 0px;
margin-top: 9px;
}
ul.nav-links li {
color: black;
text-decoration: none;
}
.burger {
display: none;
cursor: pointer;
}
.brand > img {
height: 50px;
width: 85px;
}
}
</style>
For the link underline use this:
a{ text-decoration: none; }
UPDATED
For the transform issue check this pls: CSS3 transform not working
I have been trying to resolve this for quite some time, but I am able to find the solution.
On the mobile view, the NAV bar goes under the footer. I think there is some kind of mistake in HTML or CSS code. I tried adjusting the values also added many elements on CSS but nothing worked. Please check the codes for me.
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();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* For footer but can be used for everything*/
text-decoration: none;
list-style: none;
}
body {
background-color: #ffffff;
}
nav {
font-family: 'Roboto', sans-serif;
align-items: center;
min-height: 9vh;
background-color: #3b9aff;
display: flex;
justify-content: space-around;
}
.nav-links li a:hover{
padding: 14px 22px;
background-color: #ffba30;
transition: 0.3s;
}
.logo{
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-between;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
padding: 16px 24px;
transition: 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b3bae6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 2px solid red;
}
.dropdown-content a {
display: flex;
color: white;
text-decoration: none;
display: block;
padding: 12px 16px;
}
.footer{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #3b9aff;
position: fixed;
bottom: 0;
}
.inner_footer{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container{
width: 35%;
float: left;
height: 100;
display: block;
}
.inner_footer .logo_container img{
width: 65px;
height: auto;
}
.inner_footer .footer_third{
width: calc(21.6666666667% - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child{
margin-right: 0;
}
.inner_footer .footer_third h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a{
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
padding-bottom: 5px;
}
.inner_footer .footer_third li{
display: inline-block;
padding: 0 5px;
font-size: 20px;
}
.inner_footer .footer_third span{
color: white;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-family: 200;
display: block;
width: 100%;
padding-top: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
transition: 0.3s;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background: #3b9aff;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
/*Mistake*/
nav-links{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
#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);
}
#media(max-width:900px){
.footer .inner_footer{
width: 90%;
}
.inner_footer .logo_container,
.inner_footer .footer_third{
width: 100px;
margin-bottom: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>e-commerce</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://kit.fontawesome.com/dadb58458c.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
<div class="logo">
<h4>First Education</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li class="dropdown">
Projects
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="footer">
<div class="inner_footer">
<div class="logo_container">
<img src="logo.jpg">
</div>
<div class="footer_third">
<h1>Need Help?</h1>
Terms & Conditions
Privacy Policy
</div>
<div class="footer_third">
<h1>More Intel</h1>
Redeem Voucher
Free Courses
Redeem Voucher
Free Courses
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<span>11 th Floor, 15 St Botolph St, London EC3A 7BB, United Kingdom</span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add the following property in your css classname
.nav {
position: relative;
z-index: 1000;
...previous properties
}
Your nav has a min-height of 9vh. If the footer winds up being more than 91vh, then it'll overlap.
You're footer is also position:fixed and the text is quite long, which makes it likely to exceed that height. One thing that could work is position:sticky instead of position: fixed if you want the footer to move along with the page.
Question
The Commented code at the top of the javascript is my attempt to make it so that the relevant chosen button tab (on the nav bar changes color, gets a background etc). But when I uncomment the code at the top, not only does it not work, but the hamburger menu stops working too!
How can I adjust it to make the class work (so that the selected tab is made obvious to the user)?
My Code
//Nav Bar!!
//Button selected gets color change
/*
const selectedNav = document.querySelectorAll('li');
selectedNav.forEach((item)=>{
document.selectedNav.addEventListener('click', navChange)
})
function navChange(event){
ul.forEach((item)=>{
item.classList.remove('add-this-to-selected-section');
})
event.target.classList.add('add-this-to-selected-section');
}
*/
const navSlide = () =>{
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
// Toggle Nav
burger.addEventListener('click',()=>{
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');
})
}
navSlide();
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #ffffff;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 50%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: #245871;
text-decoration: none;
letter-spacing: 3px;
font-weight: 800;
font-size: 18px;
}
.add-this-to-selected-section{
color: white;
background-color: #245871;
padding: 5px;
border-radius: 5px;
}
.burger div{
width: 25px;
height: 3px;
background-color: #245871;
margin: 5px;
transition: all 0.3s ease;
}
.burger{
display: none;
cursor: pointer;
}
#media screen and (max-width: 1024){
.nav-links{
width: 70%;
cursor: pointer;
font-weight: 1200;
}
}
#media screen and (max-width: 997px){
body{
overflow-x: hidden;
}
nav{
color: white;
}
.head-btn{
color: white;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #245871;
color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links a{
opacity: 1;
color: white;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
color: white;
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
} to {
opacity: 1;
transform: translateX(0px);
}
}
<div class="logo">
<h4>xxx</h4>
</div>
<ul class="nav-links">
<li class=".home-btn">xxx</li>
<li class=".exchange-btn">xxx</li>
<li class=".debit-btn">xxx</li>
<li class=".crypto-btn">xxx</li>
<li class=".stock-btn">xxx</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
Your help is greatly appreciated :)
Your background color for that class was the same, and also your javascript for that functionality had some problems. Here's how it should be:
const selectedNav = document.querySelectorAll('li');
const navChange = (index) => {
selectedNav.forEach((item)=>{
item.classList.remove('add-this-to-selected-section');
})
selectedNav[index].classList.add('add-this-to-selected-section');
}
selectedNav.forEach((item, index)=>{
item.addEventListener('click', ()=> navChange(index))
})
const navSlide = () =>{
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
// Toggle Nav
burger.addEventListener('click',()=>{
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');
})
}
navSlide();
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #ffffff;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 50%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: #245871;
text-decoration: none;
letter-spacing: 3px;
font-weight: 800;
font-size: 18px;
}
.add-this-to-selected-section{
color: white;
background-color: red;
padding: 5px;
border-radius: 5px;
}
.burger div{
width: 25px;
height: 3px;
background-color: #245871;
margin: 5px;
transition: all 0.3s ease;
}
.burger{
display: none;
cursor: pointer;
}
#media screen and (max-width: 1024){
.nav-links{
width: 70%;
cursor: pointer;
font-weight: 1200;
}
}
#media screen and (max-width: 997px){
body{
overflow-x: hidden;
}
nav{
color: white;
}
.head-btn{
color: white;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #245871;
color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links a{
opacity: 1;
color: white;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
color: white;
}
#keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
} to {
opacity: 1;
transform: translateX(0px);
}
}
<div class="logo">
<h4>xxx</h4>
</div>
<ul class="nav-links">
<li class=".home-btn">xxx</li>
<li class=".exchange-btn">xxx</li>
<li class=".debit-btn">xxx</li>
<li class=".crypto-btn">xxx</li>
<li class=".stock-btn">xxx</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
I frequently get these particular type of error in my code constantly which I will add a toggle function to the classList of an element with JavaScript and the code will toggle the class if I checked using the inspect element, but the class won't be effective to the element I add it to....
NOW MY PROBLEM IS :
In the code below at the media queries (max-width: 605px), I am trying to make a dropdown navigation. I added display:none to the #navbarp in the CSS and I added another class .open #navbarp { display:flex}, and I used the JavaScript to toggle the .open class. The JavaScript was toggling the class .open to the #navbarp but the CSS class wasn't effective -- the display: none wasn't changing to display:flex.
Please go to the link below to check the code
https://codepen.io/enipx/pen/zegJeP
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
height: 0;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
overflow: hidden;
}
.open #navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>
Change .open #navbarp to #navbarp.open (no space between #navbarp and .open). The former targets an element with id navbarp whose parent has the class .open. Using the latter (with no space) targets the element with both the ID and the class.
Remove the height: 0 and the overflow: hidden. These are making the elements disappear, even though display: flex is being applied. You shouldn't need them, because you have display: none which makes them totally disappear when they are supposed to be hidden.
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
.open#navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>
Selector in CSS part for the case when #navbarp has open class is written wrong. Currently, it is saying for any children of the parent that has class open and id equal navbarp apply this rule (like here https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator). While the intent is that element over which rule should be applied, should contain has both id equal navbarp and class open.
So changing, .open #navbarp to .open#navbarp will fix an issue.
Better to use only one class for everything
const The_NavBar = document.getElementById('navbar');
document.getElementById('icon-p').onclick = function()
{
The_NavBar.classList.toggle('navOpen')
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
#navbar.navOpen #icon-p span:nth-child(1) {
transform: rotate(45deg) translate(9px, 7px);
}
#navbar.navOpen #icon-p span:nth-child(2) {
opacity: 0;
}
#navbar.navOpen #icon-p span:nth-child(3) {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
#navbar.navOpen #navbarp {
/* .open#navbarp */
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p">
<span></span>
<span></span>
<span></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Homes</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>