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.

https://codepen.io/Slick_Moos/pen/RyJaMq?editors=1100

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
https://getbootstrap.com/docs/3.3/javascript/#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