The navbar is currently transparent, but when scrolling down, it has a white background. However, in the white background, it is not vertically centered. I would greatly appreciate it if you could provide the solution as a URL in CodePen
Code:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f5c5d6d18031e031d004c415d454c1c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg p-md-3 navbar-text-white d-flex">
<div class="container">
<a class="navbar-brand" href="#">Web Zone</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script>
window.addEventListener('scroll', function () {
if (window.pageYOffset > 100) {
nav.classList.remove("navbar-text-white");
nav.classList.add('bg-light', 'shadow', 'navbar-text-black');
} else {
nav.classList.add("navbar-text-white");
nav.classList.remove('bg-light', 'shadow', 'navbar-text-black');
}
});
</script>
I have tried various solutions to fix this issue, including referencing other Stack Overflow posts, but none have been successful.