Hello Front End Web Developer Master, I want to hide my navbar when links in the navbar are clicked And if I clicked the links( Which lead to different section on the same page) I want the navbar in this case ul to disapear.
Here’s the code.
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">
<title>Responsive Nav</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero">
<h1 class="logo">Prashant</h1>
<i class="fa-solid fa-bars ham_menu" id="ham_menu"></i>
<nav id="navbar" class="nav-links">
<ul>
<li><a href="#home">Home</a> </li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Work</a></li>
<li><a href="#Skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>HOme</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eius accusamus eligendi inventore natus,
facilis totam eos ad, nam, ducimus laudantium officiis non quos. Quidem odit, dignissimos soluta veniam
fugit, natus incidunt modi voluptates laboriosam laborum ducimus saepe laudantium quisquam repellendus
totam, est similique libero aut ipsa. Repellendus, sunt vel nostrum voluptatibus accusantium ad? Officiis
vel nihil maiores consequuntur quisquam similique sit ut, corporis fugit delectus doloribus quia dolor
numquam natus eligendi reiciendis! Cum culpa consequatur error minus sed in, nesciunt qui autem doloremque
vitae tempora quod aliquid blanditiis deserunt, repellat possimus eum exercitationem maiores adipisci,
laudantium aperiam voluptas necessitatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum laudantium quisquam provident aliquid expedita
nihil adipisci quidem. Obcaecati veniam magnam repellendus! Fuga, quisquam. Dolor, unde exercitationem?
Sequi, aperiam. Similique fugit laboriosam, ipsum saepe labore in omnis accusantium fuga ipsam minus iste
aliquam iusto, voluptate molestiae, consequatur unde excepturi! Assumenda, tempore?</p>
</section>
<section id="about">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eius accusamus eligendi inventore natus,
facilis totam eos ad, nam, ducimus laudantium officiis non quos. Quidem odit, dignissimos soluta veniam
fugit, natus incidunt modi voluptates laboriosam laborum ducimus saepe laudantium quisquam repellendus
totam, est similique libero aut ipsa. Repellendus, sunt vel nostrum voluptatibus accusantium ad? Officiis
vel nihil maiores consequuntur quisquam similique sit ut, corporis fugit delectus doloribus quia dolor
numquam natus eligendi reiciendis! Cum culpa consequatur error minus sed in, nesciunt qui autem doloremque
vitae tempora quod aliquid blanditiis deserunt, repellat possimus eum exercitationem maiores adipisci,
laudantium aperiam voluptas necessitatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum laudantium quisquam provident aliquid expedita
nihil adipisci quidem. Obcaecati veniam magnam repellendus! Fuga, quisquam. Dolor, unde exercitationem?
Sequi, aperiam. Similique fugit laboriosam, ipsum saepe labore in omnis accusantium fuga ipsam minus iste
aliquam iusto, voluptate molestiae, consequatur unde excepturi! Assumenda, tempore?</p>
</section>
<section id="Skills">
<h1>Skills</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eius accusamus eligendi inventore natus,
facilis totam eos ad, nam, ducimus laudantium officiis non quos. Quidem odit, dignissimos soluta veniam
fugit, natus incidunt modi voluptates laboriosam laborum ducimus saepe laudantium quisquam repellendus
totam, est similique libero aut ipsa. Repellendus, sunt vel nostrum voluptatibus accusantium ad? Officiis
vel nihil maiores consequuntur quisquam similique sit ut, corporis fugit delectus doloribus quia dolor
numquam natus eligendi reiciendis! Cum culpa consequatur error minus sed in, nesciunt qui autem doloremque
vitae tempora quod aliquid blanditiis deserunt, repellat possimus eum exercitationem maiores adipisci,
laudantium aperiam voluptas necessitatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum laudantium quisquam provident aliquid expedita
nihil adipisci quidem. Obcaecati veniam magnam repellendus! Fuga, quisquam. Dolor, unde exercitationem?
Sequi, aperiam. Similique fugit laboriosam, ipsum saepe labore in omnis accusantium fuga ipsam minus iste
aliquam iusto, voluptate molestiae, consequatur unde excepturi! Assumenda, tempore?</p>
</section>
<script src="app.js"></script>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--nav_bgcolor: #14a4dd;
--nav_color: #ffffff;
}
body {
background-image: linear-gradient(#762ba1, #c93d3d);
font-family: sans-serif;
}
.hero {
position: fixed;
top: 0;
color: var(--nav_color);
overflow: hidden;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--nav_bgcolor);
}
.logo {
margin-left: 32px;
}
.ham_menu {
position: absolute;
cursor: pointer;
display: none;
right: 20px;
top: 10px;
z-index: 1;
}
.nav-links ul {
display: flex;
align-items: center;
justify-content: space-around;
}
ul li {
list-style: none;
padding: 12px 18px;
color: white;
}
.hero a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
text-transform: uppercase;
}
main {
padding: 16px;
margin-top: 30px;
}
section {
padding: 30px;
width: 100%;
color: #ffffff;
border-bottom: 2px solid #dadada;
}
section p {
margin: 15px 12px;
grid-column: auto;
text-align: justify;
letter-spacing: 2px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
section:last-child{
border-bottom: none;
}
/* for Mobile device */
@media (max-width:820px) {
.ham_menu {
padding: 1rem;
display: flex;
}
.nav-links {
display: none;
width: 100%;
}
.hero {
padding: 1rem 1rem;
flex-direction: column;
align-items: flex-start;
}
.nav-links ul {
flex-direction: column;
width: 100%;
}
.nav-links li {
align-items: center;
}
/* .nav-links li a {
padding: .5rem .1rem;
} */
.nav-links.active {
display: flex;
}
}
JavaScript:
// get the all element
let navbarElement = document.querySelector(".nav-links");
let barElement = document.querySelector('.ham_menu');
// call event
barElement.addEventListener("click", () => {
navbarElement.classList.toggle('active');
})