After implementing a bootstrap navbar with a hover effect, I encountered an issue where clicking on a tab would change the color to white but leave a black margin behind.
Check out how it currently looks: how it is
And here's how I'd like it to appear: how it should be
Below is the code snippet:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Elegant<i class="fa fa-square"></i></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">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#homepage">HOMEPAGE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PAGE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRICING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Here's the CSS snippet:
.nav-item a {
font-size: 12px;
color: white;
letter-spacing: 2.5px;
padding: 25px !important;
display: block;}
.nav-item a:hover {
background-color: white;
color: black;}