Bootstrap 4 NavBar make Rollover for DropDown Navigation and Clickable Top Link

This explains how to change the default Bootstrap 4 NavBar so that any drop down is activated by a mouse rollover rather than an on-click.  It also shows how to change the top level navigation link to be clickable.

The default behaviour of the Bootstrap 4 navigation is any drop down has to be clicked for the drop down to work.  The Bootstrap version that I am currently using is version 4.3 which you can see at:

If you look at the given example, part of the navbar is the drop down code:

 <li class="nav-item dropdown">
        <a class="nav-link 
        <div class="dropdown-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>

To allow mouse rollover, add in the following styles as follows:

.dropdown:hover .dropdown-menu {
display: block;

Now remove the line data-toggle=”dropdown”  in the dropdown code which will make the top link clickable.

So that should be that.  Now a mouse rollover will cause the drop down to appear, and the top link is clickable.

Leave a Reply