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
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