I have been working on a project where I have created an animation effect for every link that users click on, triggering an animation before redirecting to the desired page. However, I am facing an issue with adding a bottom border below the current navbar.
.index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="new__parent-navbar">
<div class="new__logo">
<a href="/getdata/startups" class="logo-link"
><h1 class=""><b>Header-issue</b></h1></a
>
</div>
<div class="new__navbar h-nav">
<ul class="new__nav-list v-class">
<h4 class="">
<li class=""><a href="/home.html">HOME</a></li>
</h4>
<h4 class="">
<li class=""><a href="/about.html">ABOUT</a></li>
</h4>
<h4 class="">
<li class=""><a href="/contact.html">CONTACT US</a></li>
</h4>
<h4 class="">
<li class=""><a href="/job.html">JOBS</a></li>
</h4>
</ul>
<h4 class=""><a class="login-nav" href="/login/startup">LOGIN</a><</h4>
</div>
<br />
<br />
<!-- <div class="rightNav v-class">
<input type="text" name="search" id="search">
<button class="btn btn-sm">SEARCH</button>
<h1>rightnav</h1>
</div> -->
<div class="new__burger">
<div class="new__line"></div>
<div class="new__line"></div>
<div class="new__line"></div>
</div>
</nav>
<script>
burger = document.querySelector(".new__burger");
navbar = document.querySelector(".new__navbar");
// rightNav = document.querySelector('.rightNav')
navlist = document.querySelector(".new__nav-list");
black = document.querySelector(".b-black");
burger.addEventListener("click", () => {
navbar.classList.toggle("h-nav");
navlist.classList.toggle("v-class");
navbar.classList.toggle("b-black");
});
window.addEventListener("scroll", function () {
let header = document.querySelector("nav");
header.classList.toggle("sticky", window.scrollY > 0);
});
</script>
</body>
</html>
style.css
[CSS styles here]contact.html
[Contact Page HTML Content]