Adding Active Class to Current Element

I am trying to “Add Active Class to Current Element”. When I select each nav button I want the current one to highlight grey when I click them but it is not working.

If I understand correctly what you want then your page might be a good candidate for Bootstrap scrollspy (since you’re already using Bootstrap).

With scrollspy

  • The clicked nav button / link stays highlighted which is what you want.
  • If user scrolls away from that part of the page the highlighted buttons change indicating what section is currently in the viewport.
  • Can also implement smooth scrolling so page glides to next section rather than jumping abruptly.

I noticed you are using BS3. Here is link to the BS3 doc for scrollspy

You might have to make some scroll positioning adjustments for fixed nav bar.

You could alternatively use javascript to put a class on the clicked button, removing that class on all others.

Good luck