Develop Reference

Css is not doing what it intended for and I checked it again but can't find a problem

import React , {useState} from "react";
import Hamburger from "hamburger-react"
export default function Nav() {
const [isExpended , setIsExpended] = useState(false)
return(
<nav className="navigation">
WebName
<button onClick={() => {
setIsExpended(!isExpended)
}}
className="hamburger"><Hamburger /></button>
<div className={isExpended?"navigation-menu.expended":"navigation-menu"}>
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
</ul>
</div>
</nav>
)
}
Css
.navigation {
height: 60px;
width: 100%;
display: flex;
align-items: center;
position: relative;
padding: 0.5rem 0rem;
background-color: #fff;
color: black;
box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.23);
}
.brand-name {
text-decoration: none;
color: black;
font-size: 1.3rem;
margin-left: 1rem;
}
.navigation-menu {
margin-left: auto;
}
.navigation-menu ul {
display: flex;
padding: 0;
}
.navigation-menu li {
list-style-type: none;
margin: 0 1rem;
}
.navigation-menu li a {
text-decoration: none;
width: 100%;
justify-content: stretch;
}
.hamburger{
border: 0;
border-radius: 20%;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
display: none;
}
#media screen and (max-width:700px) {
.navigation-menu ul{
display:none;
}
}
#media screen and (max-width:700px){
.hamburger{
display: block;
}
}
this is the code that is not working other are working fine but when size changed Hamburger do comes but navigation-menu doesn't style and just appear there
#media screen and (max-width:700px){
.navigation-menu ul{
flex-wrap: wrap;
position: absolute;
top: 60px;
left: 0;
flex-direction: column;
width: 100%;
height: calc(100vh - 77px);
background-color: #fff;
border-top: 1px solid black;
}
.navigation-menu li{
text-align: center;
margin: 0;
}
.navigation-menu li a{
color: black;
width: 100%;
padding: 1.5rem 0;
}
.navigation-menu li:hover{
background-color: #eee;
}
i try instead of class Name I use there tag name but result was still the same i don't know where my code gone wrong everyother thing is working as intended
}
#media screen and (max-width:700px){
.navigation-menu ul{
display: none;
}
}
#media screen and (max-width:700px){
.navigation-menu-expended ul{
display: block;
}
}

Trouble understanding navbar dropdown menu

I'm trying to make a nav bar I found on CodePen, but the problem is it doesn't have a dropdown menu. I know how to make a dropdown menu, but don't know how to position and style it as of now. I'm still fairly new to CSS.
Any help is very much appreciated, thank you!
If the code is not responsive, here's the original.
https://codepen.io/WebDevSimplified/pen/LqKQRK
<nav class="navbar">
<a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li> Books</li>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Author</li>
<li>About Us</li>
<ul>
<li>Our Team</li>
</ul>
</li>
<li>News</li>
<li>Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
</li>
</div>
</nav>
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
height: 100px;
}
.brand-title {
text-decoration: none;
color: white;
font-size: 2.0rem;
margin: 1.5rem;
cursor: pointer;
}
.brand-title:hover {
color: white;
}
.navbar-links {
padding: 0px;
margin-right: 35%;
border: red dotted 3px;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}

I guess you want nested dropdown in navigation link. Also you can use bootstrap navbar or w3school navbar.
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
.navigation {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #fff;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
background: #2581dc;
color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
<article>
<h2>Navigation</h2>
<p>Responsive Dropdown Navigation Bar.</p>
</article>

Accordingly to your reply to my comment I have added some code to yours.
So please check the code from https://codepen.io/13rpsingh/pen/poajyXK
window.addEventListener("load", ()=>{
let toggleButton = document.querySelector(".toggle-button");
let navbarLinks = document.querySelector(".navbar-links");
toggleButton.addEventListener('click', (e)=>{
if(navbarLinks.classList.contains("active")){
navbarLinks.classList.remove("active")
toggleButton.classList.remove("active")
}else{
navbarLinks.classList.add("active")
toggleButton.classList.add("active")
}
})
let menuDropDown = document.querySelector(".navbar-links ul li ul");
let dropDownTrigger = document.querySelector("#dropdown-trigger");
if(dropDownTrigger){
dropDownTrigger.addEventListener('click', (e) =>{
if(menuDropDown.style.display == "flex"){
menuDropDown.style.display = "none";
}else{
menuDropDown.style.display = "flex";
}
})
}
})
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
height: max-content;
max-width:100%;
}
.brand-title {
text-decoration: none;
color: white;
font-size: 2.0rem;
margin: 1.5rem;
cursor: pointer;
}
.brand-title:hover {
color: white;
}
.navbar-links {
padding: 0px;
margin-right: 35%;
border: red dotted 3px;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.toggle-button .bar{
position: absolute;
transition: all .3s ease-in-out;
}
.toggle-button .bar:nth-of-type(1){
top: 0;
}
.toggle-button .bar:nth-of-type(2){
top: 50%;
transform : translateY(-50%);
}
.toggle-button .bar:nth-of-type(3){
bottom: 0;
}
.toggle-button.active .bar:nth-of-type(1){
top: 50%;
transform: rotate(-45deg) translateY(-50%);
}
.toggle-button.active .bar:nth-of-type(2){
display:none;
}
.toggle-button.active .bar:nth-of-type(3){
bottom: 50%;
transform: rotate(45deg) translateY(50%);
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
position:relative;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
.navbar-links ul li ul{
display:none;
flex-direction: column;
position:absolute;
background:#d0d0d0;
max-width: 100%;
}
.navbar-links ul li ul li a{
color : black;
}
.navbar-links ul li ul li a:hover{
color : white;
}
<nav class="navbar">
<a div class="brand-title" href="submissions.html">AESTHETIC PRESS</a></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li> Books</li>
<ul>
<li>Young Adult</li>
<li>Adult</li>
<li>Non-Fiction</li>
</ul>
</li>
<li>Author</li>
<li>About Us</li>
<ul>
<li>Our Team</li>
</ul>
</li>
<li>News</li>
<li id="dropdown-trigger">Contact Us <i class="fa-solid fa-caret-down"></i>
<ul>
<li>Submissions</li>
<li>Permissions</li>
<li>Translation</li>
<li>Press</li>
<li>Hiring</li>
<li>Contact</li>
</ul>
</li>
</div>
</nav>
Maybe, you can easily understand the code which I added.
I hope It will help

Adds the effect of the hover on the chilled element using the styled component

Good evening everyone.
I'm trying to build a component using React and use the Style Component to add the CSS.
But when adding the Hover effect to the element (a), the effect is also reflected on all the elements inside the (a). As in the picture
<Section>
<PortLogin>
<h1>Welcome to Your Profettional Community</h1>
<ul>
<a href="##" ><li href="##">Search For a job</li><i className="fas fa-chevron-right"></i>
</a>
<a href="##"><li href="##">Find a Person You Know</li><i className="fas fa-chevron-right">
</i></a>
<a href="##"><li href="##">Learn a new skill</li><i className="fas fa-chevron-right"></i>
</a>
</ul>
</PortLogin>
<img src="Img/SectionImg.svg" alt="Img Section "></img>
</Section>
my styled-components
const Section=styled.div`
display: flex;
justify-content: start;
flex-wrap:wrap;
margin-top: 40px;
& img{
width: 500px;
position: absolute;
right: 0;
}
`;
const PortLogin=styled.div`
margin-top: 25px;
display:flex;
flex-direction:column;
justify-content:space-around;
& ul{
margin-top:50px;
& :hover {
box-shadow: 3px 3px 8px 2px #00000040;
}
}
& ul>a{
text-decoration:none;
padding: 25px 20px;
margin-bottom: 20px;
width:70%;
list-style: none;
display: flex;
justify-content:space-between;
border: 1px solid #d3cccc;
border-radius: 13px;
font-size: larger
}
ul li a{
text-decoration: none;
color:Black;
}
`

You need to move your hover class out of your ul tag (which is wrapping all of the elements within, so all lists and links within it.
I assume you want the links to be hoverable only, so something like this should be more appropriate:
const PortLogin = styled.div`
margin-top: 25px;
display: flex;
flex-direction: column;
justify-content: space-around;
& ul {
margin-top: 50px;
}
& ul > a {
text-decoration: none;
padding: 25px 20px;
margin-bottom: 20px;
width: 70%;
list-style: none;
display: flex;
justify-content: space-between;
border: 1px solid #d3cccc;
border-radius: 13px;
font-size: larger;
}
ul li a {
text-decoration: none;
color: Black;
}
ul li a:hover {
text-decoration: underline;
}
`;
`

I solved the problem. The solution is very simple. I have to use Direct Child
const PortLogin = styled.div`
margin-top: 25px;
display: flex;
flex-direction: column;
justify-content: space-around;
& > ul {
margin-top: 50px;
}
& ul > a {
text-decoration: none;
padding: 25px 20px;
margin-bottom: 20px;
width: 70%;
list-style: none;
display: flex;
justify-content: space-between;
border: 1px solid #d3cccc;
border-radius: 13px;
font-size: larger;
}
ul > li > a {
text-decoration: none;
color: Black;
}
ul > li > a:hover {
text-decoration: underline;
}
`;
`

Javascript Toggle class working but class not effective in element in dropdown

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>

Responsive Navigation - flexbox dropdowns causing overflow

Currently doing a quick website. Got navigation styled and working correctly, however I implemented a drop down as a nav item. This causes three problems I can't quite seem to fix:
On the navigation toggle, content overlaps with each other.
On the nav toggle, the navigation makes you scroll, even through there
is room to expand the dropdown on desktop screens the hover.
On desktop screens the nav item causes the drop to happen within the header with a scroll bar.
Been stuck on this for a while any assistance would be appreciated.
function NavToggle() {
var tn = document.getElementById("nav-bar")
if (tn.style.display === "none") {
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
overflow-y: auto;
max-height: 100vh;
overflow-x: hidden;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul {
list-style-type: none;
}
nav li {
height: 50px;
}
.title-wrapper>a {
font-size: 16px;
}
a {
color: #999;
}
nav a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover {
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle {
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button {
padding: inherit;
}
#media screen and (min-width: 930px) {
nav ul {
display: flex;
}
/* Header Content */
.header-container {
display: flex;
justify-content: center;
align-items: center;
}
.menu-toggle {
display: none;
}
.header-wrapper {
max-width: 1200px;
width: 100%;
display: flex;
justify-content: center;
padding: 0 20px;
}
.header-title {
font-size: 18px;
}
#nav-bar {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
a {
padding: 0 1rem;
}
.nav-dropdown {
position: relative;
}
.nav-dropdown-menu {
display: none;
position: absolute;
z-index: 2;
}
.nav-dropdown:hover>.nav-dropdown-menu {
display: block;
}
}
<body>
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a>Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li class="nav-dropdown">Account
<ul class="nav-dropdown-menu">
<li>Account</li>
<li>Order History</li>
<li>Wishlist</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
</body>

To fix the first two issues, you have to set the display of .nav-dropdown to inline-block:
.nav-dropdown {
display: inline-block;
}
To fix the third issue, you have to set the overflow of the header to visible, since you have set it to auto which generates scroll bars if the content overflows.
.header-container {
overflow: visible;
}
This is a working example (without fixing any other issues):
function NavToggle() {
var tn = document.getElementById("nav-bar")
if (tn.style.display === "none") {
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
overflow-y: auto;
max-height: 100vh;
overflow-x: hidden;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul {
list-style-type: none;
}
nav li {
height: 50px;
}
.title-wrapper>a {
font-size: 16px;
}
a {
color: #999;
}
nav a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover {
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle {
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button {
padding: inherit;
}
.nav-dropdown {
display: inline-block;
margin-bottom: 150px;
}
#media screen and (min-width: 930px) {
nav ul {
display: flex;
background-color: #222;
}
/* Header Content */
.header-container {
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
}
.menu-toggle {
display: none;
}
.header-wrapper {
max-width: 1200px;
width: 100%;
display: flex;
justify-content: center;
padding: 0 20px;
}
.header-title {
font-size: 18px;
}
#nav-bar {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
a {
padding: 0 1rem;
}
.nav-dropdown {
position: relative;
}
.nav-dropdown-menu {
display: none;
position: absolute;
z-index: 2;
}
.nav-dropdown:hover>.nav-dropdown-menu {
display: block;
}
.nav-dropdown {
margin-bottom: 0;
}
}
<body>
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a>Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li class="nav-dropdown">Account
<ul class="nav-dropdown-menu">
<li>Account</li>
<li>Order History</li>
<li>Wishlist</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
</body>
Or see this fiddle.