I want to Highlight the current section and current page in the bootstrap navbar using Javascript

Question

I am trying to highlight nav link in navbar when user scroll through them or is navigating to that particular page. I want also dropdown menu tittle to be highlighted so user can see in which dropdown menu there are currently.

I tried using scrollspy of bootstrap 5 but it is not working also i tried Javascript but that is also not working for me.

this must be fariely simple but i am not able to figure it out.

below is my approach that i used but its to working

My navbar code 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">
        
                    warum wir
        
                  </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">
        
                    Dienstleistungen
        
                  </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>



> Javascript i tried

<script type="text/javascript">
// Get all sections that have an ID defined
const sections = document.querySelectorAll("section[id]");

// Add an event listener listening for scroll
window.addEventListener("scroll", navHighlighter);

function navHighlighter() {

  // Get current scroll position
  let scrollY = window.pageYOffset;

  // Now we loop through sections to get height, top and ID values for each
  sections.forEach(current => {
    const sectionHeight = current.offsetHeight;
    const sectionTop = current.offsetTop - 50;
    sectionId = current.getAttribute("id");

    /*
    - If our current scroll position enters the space where current section on screen is, add .active class to corresponding navigation link, else remove it
    - To know which link needs an active class, we use sectionId variable we are getting while looping through sections as an selector
    */
    if (
      scrollY > sectionTop &&
      scrollY <= sectionTop + sectionHeight
    ){
      document.querySelector(".navbar-nav a[href*=" + sectionId + "]").classList.add("new");
    } else {
      document.querySelector(".navbar-nav a[href*=" + sectionId + "]").classList.remove("new");
    }
  });
}


</script>

Answer 1

You can check this documentation of scrollspy in bootstrap 5 And add jQuery CDN below of /body tag. I guess you don't need to add extra javascript code when you use bootstrap 5.