How can I highlight the main menu button on the nav bar when I am on a page in either the menu or on the sub-menu? I already created an active class in CSS but I am not sure how to handle the JavaScript. This is a huge application with multiple pages so the goal is to make it as dynamic as possible.
This is my current code:
.dropbtn:active {
background-color: blue
}<div id="headerDiv" class="divHeaderLoginButton">
<div style="width:1120px; margin: 0px auto;">
<div id="menu" style="display:none;">
<button id="btn1" class="dropbtn">Home<i class="down"></i></button>
<div class="dropdown-content divH">
<button class="subMenuBtn" id="btn11">Main Menu <i class="right"></i></button>
<div class="dropdown-content divH" id="dv1">
<a href="/About" onclick="window.location.reload(true);">About</a>
<a href="/Index" onclick="window.location.reload(true);">Index</a>
<a href="/DisplayTeam" onclick="window.location.reload(true);">Display Team</a>
</div>
<button id="btn12" class="subMenuBtn">Shop <i class="right"></i></button>
<div class="dropdown-content divH" id="dv2">
<a href="/Jewelery" onclick="window.location.reload(true);">Jewlery</a>
<a href="/Clothes" onclick="window.location.reload(true);">Clothes</a>
<a href="/Shoes" onclick="window.location.reload(true);">Shoes</a>
<a href="/Accessories" onclick="window.location.reload(true);">Accessories</a>
</div>
</div>
</div>