Cacher is the code snippet organizer for pro developers

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

jQuery(document).ready(function($) {
	if ( $(document).width() > 768 ) {
		$('.dropdown-toggle').click(function() {
			var location = $(this).attr('href');
			window.location.href = location;
			return false;
		});
	}
});

// add to theme_enqueue_styles() function
wp_enqueue_script('nav_toggle', get_stylesheet_directory_uri() . '/includes/js/nav_toggle.js', 'jquery', false, true);



//require a new menu walker class
require get_stylesheet_directory() . '/includes/bootstrap-wp-navwalker_CUSTOM.php';

1. Copy and bootstrap-wp-navwalker.php into child includes folder and rename to bootstrap-wp-navwalker_CUSTOM.php
2. Rename class name on line 20 to wp_bootstrap_navwalker_CUSTOM
3. Change line 108 of bootstrap-wp-navwalker.php to: $atts['href'] = $item->url;
4. Create new javascript file named nav_toggle.js and copy code below into it.
5. In the functions file copy and paste the below scripts to the page
6. In the header file change the wp_nav_menu to this   'walker' => new wp_bootstrap_navwalker_CUSTOM()
7. Add the below style to the stylesheet media queries for 768 and up for the hover effect