Bootstrap Hover Background Color

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 change the bootstrap navbar link’s background color on hover. Also, add a transition to have a smooth hover effect.

Here is a step-by-step tutorial to change the Bootstrap navbar background color on hover.

Final output:

Bootstrap navbar hover background color on small screen
on smaller screens

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. Let’s change the colors on hover. (I changed the background color to #FFACB7 and added some CSS.)

.navbar .navbar-nav .nav-link {
    color: #fff;
    font-size: 1.1em;
}
.navbar .navbar-nav .nav-link:hover {
  background-color: #FFACB7;
  color: #fff;
}

Output:

bootstrap navbar hover background color step 2
on smaller screens

3. To have the background color full height, like in the final result, we need to add some padding and adjust the original padding for the navbar-brand and nav-links. Also, use media queries to make sure it’s responsive.

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

Output:

bootstrap navbar hover background color step 3
on smaller screens

4. Lastly, let’s add a transition to make the color change smooth.

.navbar .navbar-nav .nav-link {
  padding: 1em 0.7em;
  transition: all 0.5s;
}

Output:


Final Output Code for Bootstrap Navbar Hover Background Color:

HTML

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #FFACB7;">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler8"
        aria-controls="navbarToggler8" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarToggler8">
        <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 {
    background-color: #fff;
    color: #ffacb7;
  }  
.navbar .navbar-nav .nav-link {
  padding: 0.6em;
  font-size: 1.2em;
  transition: all 0.5s;
}
.navbar .navbar-brand {
  padding: 0 0.6em;
  font-size: 1.5em;
  font-weight: bold;
}
@media only screen and (min-width: 992px) {
  .navbar {
    padding: 0;
  }
  .navbar .navbar-nav .nav-link {
    padding: 1em 0.7em;
  }
  .navbar .navbar-brand {
    padding: 0 0.8em;
  }
}

Recently added:

4.7 3 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
YouTube
YouTube
WhatsApp
Pinterest
fb-share-icon
Instagram
0
Would love your thoughts, please comment.x
()
x