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.

A simple Javascript Submit and Validation example

The following HTML script illustrates a simple Javascript validation and submit script that checks inputs on the PC before it is submitted to the server.  You might use this method on a web site before submission to the PHP script.  The Javascript displays a nice error message on submission if there are any errors and it is quite easy to add more tests when other text boxes are added.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>
<html xmlns=””>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Submit a form using Javascript with input validation</title>

<script language=”javascript” type=”text/javascript”>

//Javascript that will submit the form when all entries are valid
function button_onclick(frmCreate) {

var themessage = “Error in entries : “;
var isOK = true;

if ( frmCreate.txtItem_Number.value == “” ) {
themessage = themessage + “\n” + “* Enter PayPal item code”;
isOK = false;

if ( frmCreate.txtItem_Name.value == “” ) {
themessage = themessage + “\n” + “* Enter PayPal item name”;
isOK = false;

if ( isOK == false ) {
} else {


//Checks if the entry is numeric
function isNumeric(inputVal) {
numeric = true;
inputStr = inputVal.toString();
for (var i = 0; i< inputStr.length; i++) {
var oneChar = inputStr.charAt(i);

if (oneChar < “0” || oneChar > “9”) {
return false;


if (numeric == false) {
return false; }
else {
return true; }


function LowerLimit_onblur(frmCreate) {
if ( !isNumeric( frmCreate.txtLowerLimit.value ) ) {
window.alert(“Enter a integer number”);
frmCreate.txtLowerLimit.value = “”;



<form name=”frmCreate” method=”post” action=”test.html”>

<input type=”button” name=”Create” value=”Create” language=”javascript” onClick=”return button_onclick(frmCreate)” />

<strong>Product Item Reference</strong>

<input type=”text” name=”txtItem_Number” />

<strong>Product Item Name</strong>

<input type=”text” name=”txtItem_Name” size=”50″ /><br/>

<strong>Enter lower limit</strong>
<input type=”text” name=”txtLowerLimit”  value=”5″ size=”3″  LANGUAGE=”javascript” onBlur=”return LowerLimit_onblur(frmCreate)” />



Creating a different rollover for an href using a class

Here are a couple of ways of creating a different rollover effect for an href link.

Method 1 using a class

<style type=”text/css”>
color: #00f;
text-decoration: none

color: #f90;
text-decoration: underline

and this is used as follows :

<a href=”#”>This is a link</a>


Method 2 using a class in a div

and this is used as follows :

<style type=”text/css”>
.leftLink { margin-top:5px;margin-bottom:5px;font-size:small; }
.leftLink a { color:White; }
.leftLink a:hover { color:#ff9933; }

<div><a href=”#”>This is a link</a></div>