Bootstrap Navbar underline animation on hover

Bootstrap navbar helps a lot when it comes to responsive web development. You can build numerous variations of the Bootstrap navbar. In this post, you will learn how to create Bootstrap navbar underline animation.

Here is a step-by-step tutorial to create an underline or bottom-border on hover for Bootstrap navbar links.

Final output:

On smaller screens:

bootstrap navbar underline animation on mobile

1. If you follow the Bootstrap documentation, this is the basic left-aligned navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Output:

2. To create an underline/border-bottom on hover, add this CSS code. I have used the CSS pseudo-element ::after to create an underline/border-bottom. (I changed the background-color to #50e2f9 and added some CSS.)

.navbar .navbar-nav .nav-link {
  color: #000000;
  font-size: 1.1em;
  position: relative;
}
.navbar .navbar-nav .nav-link:hover {
  color: #000000;
}
.navbar .navbar-nav .nav-link::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #000000;
  color: transparent;
  width: 0%;
  content: '.';
  height: 3px;
}
.navbar .navbar-nav .nav-link:hover::after {
  width: 100%;
}

Output:

bootstrap navbar underline animation step 2

3. The underline is midway now. To have it at the very bottom, like the final result, re-adjust the original padding for the navbar-brand and nav-links. Also, use media queries to make sure it’s responsive.

@media only screen and (min-width: 960px) {
  .navbar .navbar-nav .nav-link {
    padding: 1em 0.7em;
  }
  .navbar {
    padding: 0;
  }
  .navbar .navbar-brand {
    padding: 0 0.7em;
  }
}

Output:

4. Lastly, let’s add a transition to have a nice underline animation.

.navbar .navbar-nav .nav-link {
  transition: all 0.5s;
}

Output:

Final Output Code for Bootstrap Navbar underline animation:

HTML

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #50e2f9;">
    <a class="navbar-brand" href="#">Hover Links</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler9"
        aria-controls="navbarToggler9" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarToggler9">
        <ul class="navbar-nav">
            <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="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

CSS

.navbar .navbar-nav .nav-link:hover {
  color: #000000;
}
@media only screen and (min-width: 960px) {
  .navbar .navbar-nav .nav-link {
    padding: 1em 0.7em;
  }
  .navbar {
    padding: 0;
  }
  .navbar .navbar-brand {
    padding: 0 0.7em;
  }
}
.navbar .navbar-nav .nav-link {
  position: relative;
}
.navbar .navbar-nav .nav-link::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #000000;
  color: transparent;
  width: 0%;
  content: '';
  height: 3px;
  transition: all 0.5s;
}
.navbar .navbar-nav .nav-link:hover::after {
  width: 100%;
}

You can checkout other Bootstrap navbar templates here.

Leave a Reply

Your email address will not be published. Required fields are marked *