I want to highlight the current section and current page in the bootstrap navbar using Javascript can anyone help, also i have 2 Dropdown menus one has sections on the homepage and the other dropdown links to sub-pages so I want to highlight the dropdown menu title also have tried myself but nothing is working for me
my code for navbar is
<nav id="navbarMain" class=" navbar navbar-expand-lg navbar-light bg-light col px-md-3 px-sm-1 ">
<div class="container-fluid px-md-5 px-sm-0 mainlogo ">
<a class="navbar-brand " href=""> <img class="img-fluid " src="" alt="" style="max-width:300px;"> </a>
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav justify-content-end ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#dashboard">Dashboard</a>
</li>
<li class="nav-item my-auto px-xl-3 px-ld-1 ">
<a class="nav-link active hometag" aria-current="page" href="/#hero">Home</a>
</li>
<li id="warumdrop" class="nav-item px-xl-3 px-lg-1 my-auto dropdown">
<a class="nav-link dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Homepages section
</a>
<ul class="dropdown-menu " aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/#warum">warum</a></li>
<li><a class="dropdown-item" href="/#whyus">why us</a></li>
<li><a class="dropdown-item" href="/#feedback">feedback</a></li>
</ul>
</li>
<li class="nav-item px-xl-3 px-lg-1 my-auto dropdown ">
<a class="nav-link dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Subpages links
</a>
<ul class="dropdown-menu " aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="<?php echo base_url(); ?>requirements/glassAndBuildingCleaningPage">glassAndBuildingCleaningPage</a></li>
<li><a class="dropdown-item" href="<?php echo base_url(); ?>requirements/janitorialPage">janitorialPage</a></li>
<li><a class="dropdown-item" href="<?php echo base_url(); ?>requirements/chemicalCleaningPage">Cleaning</a></li>
<li><a class="dropdown-item" href="<?php echo base_url(); ?>requirements/theCurtainPage">curtain</a></li>
</ul>
</li>
</li>
<li class="nav-item px-xl-3 px-lg-1 my-auto ">
<a href="<?php echo base_url(); ?>requirements/contactPage" class="nav-link ">contact</a>
</li>
<li class="nav-item px-xl-3 px-lg-1 my-auto ">
<a style="color:#D70143;" href="<?php echo base_url(); ?>requirements/vacanciesPage" class="nav-link joblink">Jobpage</a>
</li>
<li class="nav-item">
<a style="color:#D70143;" href="'. base_url() .'requirements/logout" class="nav-link ">Logout</a>
</li>
<li class="nav-item ">
<a href="#" data-bs-toggle="modal" data-bs-target="#loginmodal" style="color:#032A66; font-size:25px; width:auto;" class=" loginatag nav-link "><i class="bi bi-box-arrow-in-right"></i></a>
</li>
</ul>
</div>
</div>
</nav>