I'm trying to have an underline bellow the menu items on hover that is the length of the word. For now, it takes the length of the element. How can I achieve this?
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand active" href="index.html">
<img src="./examWebLaBotteLogo.svg" alt="Logo de LA BOTTE"><span class="sr-only">(current)</span></a>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 nav-fill w-100">
<a class="nav-item nav-link" href="menu.html">La carte</a>
<a class="nav-item nav-link" href="suggestions.html">Nos suggestions</a>
<a class="nav-item nav-link" href="event.html">Événements</a>
<a class="nav-item nav-link" href="contact.html">Contact & horaires</a>
</div>
</div>
</nav>```
.navbar-light .navbar-nav .nav-link {
padding-bottom: 5px;
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
color: black;
}
.navbar-light .navbar-nav .nav-link:hover {
padding: 5px;
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
color: black;
border-bottom: 5px solid#b40900;
}
Remove the padding from hover and add margin to normal class see the example and text decoration is none also. hope it will help ..
.navbar-light .navbar-nav .nav-link {
padding-bottom: 5px;
margin:5px;
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
text-decoration: none;
line-height:2rem;
color: black;
}
.navbar-light .navbar-nav .nav-link:hover {
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
color: black;
border-bottom: 5px solid #b40900;
}
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand active" href="index.html">
<img src="./examWebLaBotteLogo.svg" alt="Logo de LA BOTTE"><span class="sr-only">(current)</span></a>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 justify-content-between w-100">
<a class="nav-item nav-link" href="menu.html">La carte</a>
<a class="nav-item nav-link" href="suggestions.html">Nos suggestions</a>
<a class="nav-item nav-link" href="event.html">Événements</a>
<a class="nav-item nav-link" href="contact.html">Contact & horaires</a>
</div>
</div>
</nav>