Bootstrap Navbar dropdown on hover(and invert arrow on hover)

Bootstrap navbar helps a lot when it comes to responsive web development. You can build numerous variations of the Bootstrap navbar. Bootstrap provides navbar with dropdown, but it opens on click. Here’s how you can open the Bootstrap navbar dropdown on hover.

Here is a step-by-step tutorial to open dropdown on hover and also to invert the arrow icon.

Final output:

bootstrap navbar dropdown hover on mobile


1. If you follow the Bootstrap documentation, this is the basic navbar with dropdown link:

<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Output:

2. Add class dropdown-hover to the dropdown link on line 17 and class dropdown-hover-menu to the dropdown menu on line 21. (I changed the background-color to #96f6fa and added some CSS.)

<li class="nav-item dropdown dropdown-hover">

<div class="dropdown-menu dropdown-hover-menu" aria-labelledby="navbarDropdownMenuLink">

.navbar .navbar-nav .nav-link {
    color: #000000;
    font-size: 1.1em;
}
.navbar .navbar-nav .nav-link:hover{
    color: #808080;
}

Output:

3. As you notice, the navbar opens on click. To open the Bootstrap navbar dropdown on hover, add the CSS code below.

@media only screen and (min-width: 960px) {
  .dropdown-hover:hover .dropdown-hover-menu {
    display: block;
    margin-top: 0;
  }
}

Output:

4. Additionally, to invert the down arrow on hover, add the CSS code below inside the media query.

  @media only screen and (min-width: 960px) {
  .dropdown-hover:hover .dropdown-toggle::after {
    border-bottom: 0.3em solid;
    border-top: 0;
  }
  }

Output:

5. To invert the down arrow on smaller screens, add the CSS code.

.dropdown-hover.show .dropdown-toggle::after {
  border-bottom: 0.3em solid;
  border-top: 0;
}

Output:

Final Output Code for Bootstrap Navbar dropdown on hover:

HTML

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #96f6fa;">
    <a class="navbar-brand" href="#">Coding Yaar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbarToggler4"
        aria-controls="myNavbarToggler4" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="myNavbarToggler4">
        <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 dropdown dropdown-hover">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu dropdown-hover-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

CSS

.navbar .navbar-nav .nav-link {
    color: #000000;
    font-size: 1.1em;
}
.navbar .navbar-nav .nav-link:hover{
    color: #808080;
}
@media only screen and (min-width: 960px) {
  .dropdown-hover:hover .dropdown-hover-menu {
    display: block;
    margin-top: 0;
  }
  .dropdown-hover:hover .dropdown-toggle::after {
    border-bottom: 0.3em solid;
    border-top: 0;
  }
}
.dropdown-hover.show .dropdown-toggle::after {
  border-bottom: 0.3em solid;
  border-top: 0;
}

You can checkout other Bootstrap navbar templates here.

Leave a Reply

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