Mark active state on navbar dropdown?

Bootstrap Studio Help
1

Hi there

I am using the standard Navbar Right Links from Bootstrap Studio with a dropdown menu. I have turned on “Smart Active State”. This marks the active page in a darker color, but does not work for the nav item of the dropdown menu. Is there any CSS solution to activate the nav bar item of the dropdown menu on pages when on of its items is the active page?

Thanks for your help!

Cheers
Guido

2

You can fix it with javascript like this

document.addEventListener('DOMContentLoaded', function () {
  const page = location.pathname.slice(1) || 'index.html';
  const dropdowns = document.querySelectorAll('.dropdown-toggle');

  dropdowns.forEach((dropdown) => {
    const dropdownMenu = dropdown.nextElementSibling;
    if (dropdownMenu && dropdownMenu.classList.contains('dropdown-menu')) {
      const menuLinks = dropdownMenu.querySelectorAll(
        '.dropdown-item:not([href="#"])'
      );

      menuLinks.forEach((link) => {
        if (link.pathname.slice(1) === page) {
          link.classList.add('active');
          dropdown.classList.add('active');
        } else {
          link.classList.remove('active');
        }
      });
    }
  });
});
2 Likes