I'm pretty new to web development.
I created a navbar using Bootstrap and added a :hover to the links. I also gave the hover box a color and made the corners round.
When I hover over the link, the box turns round (as intended). The issue is when I hover off the link, it turns back to a box. I tried to looking for an answer but had no luck.
I just want the containers to be the same size for each link and to stay round when hovering on and off the link.
I will try to add my code so you all can see what I'm working with.
Here is my HTML code:
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg py-4 navbar-dark" style="background-color: #000000;">
<div class="container-fluid">
<a class="navbar-brand mb-0 h1 text-white fs-1 px-4" href="#">Name</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto px-4">
<a class="nav-link active text-light fs-5 mx-2 nav-active" aria-current="page" href="#">Home</a>
<a class="nav-link text-secondary fs-5 mx-3" href="#">Link 1</a>
<a class="nav-link text-secondary fs-5 mx-3" href="#">Link 2</a>
<a class="nav-link text-secondary fs-5 mx-3" href="#">Link 3</a>
<a class="nav-link text-secondary fs-5 mx-3" href="#">Link 4</a>
</div>
</div>
</div>
</nav>
Here is my CSS code:
body {
background-color: #252525;
}
.nav-link:hover {
color: white;
background-color: #48e0e4;
border-radius: 30px;
transition: 0.5s;
}
.nav-active {
color: white;
background-color: #48e0e4;
border-radius: 30px;
}
Here is a link to the codepen if you need: https://codepen.io/sevilu6/pen/gOmPoZr