navbar-css.php | style: | opt: | align: | pos:
Bootstrap navbar by default does not employ a hover effect to display the dropdown menu. The following are a group of CSS and JavaScript methods to make hover work on desktop computers and 2:1 devices when using a mouse.
The styles, cerulean thru yeti, are all adapted from and credited to https://bootswatch.com/.
The problem: With core navbar you have to click once to activate the dropdown menu and a second to close it or click to another menu item. It's an extra click for non-touchscreen devices, however is necessary on touchscreen because there is no 'hover' state in touchscreen mode.
If you set the top-level button to be a link, this would be fine on regular computers because you can hover to reveal the dropdown menu and click on the top item to visit that page. However, setting the same on touchscreen would mean clicking on the menu item would take you directly to the page and not reveal any submenu items. It's a conundrum.
To make a bootstrap top-level item activate upon hover for desktop devices to 768 px in width (configurable based upon your needs) you can add the follow CSS code to your stylesheet:
@media (min-width: 767px) {
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
}
To keep the sublevel items visible on devices in touchscreen mode just as with the default navbar you would need to set the toplevel link as an activator (a href="#").