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:

https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

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 
                  dropdown-toggle" 
                  href="#" 
                  id="navbarDropdown" 
                  role="button" 
                  data-toggle="dropdown" 
                  aria-haspopup="true" 
                  aria-expanded="false">
          Dropdown
        </a>
        <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>
        </div>
      </li>

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

<style>
.dropdown:hover .dropdown-menu {
display: block;
}
</style>

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.