I am currently working on a bootstrap nav bar that has main menus and submenus. I am trying to figure out how to make one of the main menus highlighted after selecting its submenu. For example, when I choose "For Shippers", I want "HOW IT WORKS" to become active and highlighted. However, my current code only allows me to make the main menu active if it is selected, not the submenu. I believe adding some JavaScript or JQuery to my existing code can solve this issue, but I am not very experienced with JQuery. Any assistance would be greatly appreciated.
$(function() {
// highlight the current nav
$("#index a:contains('HOME')").parent().addClass('active');
$("#shippers a:contains('SHIPPERS')").parent().addClass('active');
$("#carriers a:contains('CARRIERS')").parent().addClass('active');
$("#carrier_signup a:contains('First Time User Sign Up')").parent().addClass('active');
$("#carrier_login a:contains('Current User Login')").parent().addClass('active');
$("#about a:contains('ABOUT US')").parent().addClass('active');
$("#contact a:contains('CONTACT US')").parent().addClass('active');
$("#howitworks a:contains('HOW IT WORKS')").parent().addClass('active');
$("#hiw_shippers a:contains('FOR SHIPPERS')").parent().addClass('active');
$("#hiw_carriers a:contains('FOR CARRIERS')").parent().addClass('active');
// make menus drop automatically with hover for dropdown menu
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
}).navbar-default {
background-color: #0064ff;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
background-color: #E8E8E8;
}
.navbar {
margin-bottom: 0;
}
.icon-bar {
margin: -20px 0px -20px 3px;
}
.active {
background-color: #E8E8E8;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#"> America <span class="glyphicon glyphicon-star-empty"></span>Shipping Choice
</a>
</div>
<div class="collapse navbar-collapse dropdown" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.php">HOME</a></li>
<li><a href="Shippers_login.php">SHIPPERS</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">CARRIERS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="carrier_signup.php">First Time User
<span class="glyphicon glyphicon-arrow-right"></span> Sign up</a></li>
<li><a href = "carrier_login.php">Current User <span class="glyphicon glyphicon-arrow-right"></span> Login</a></li>
</ul>
</li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="contact.php">CONTACT US</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">HOW IT WORKS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="howitworks_shippers.php"><span class="glyphicon glyphicon-arrow-right"></span> For Shippers</a></li>
<li><a href="howitworks_carriers.php"><span class="glyphicon glyphicon-arrow-right"></span> For Carriers</a></li>
</ul>
</li>
</ul>
</div></div></nav>