cssbootstrap-4underline

Menu underline on hover, text length not element length


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;
}


Solution

  • 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>