Changing menu options is NOT changing the active class even though I followed the solution in the li-CodePudding

So, the website I'm working on is:

This is what happens when you CLICK on a menu and scroll to Roofing Services We offer:

I think that the ACTIVE menu is TIED together, meaning, when the addEventListener() is hit, it REMOVES ALL active classes from everything, hence, the reason.

If anyone can assist me, I'd appreciate it. Thank you.

CodePudding user response：

Your click handler on the <a> tags is adding/removing the .active class to the <a> tag but it should be doing it to the parent <li> tag:

$('.navbar-nav li a').click((e) => {
  $('.active').removeClass('active');
  $(e).parent().addClass('active');
  // ...
}

Your scroll handler has a similar problem. It should be adding/removing the .active class from the <li > tags, not the <a> tags:

if ($(this).position().top <= distance   250) {
  $('.navbar-nav .nav-item.active').removeClass('active');
  $('.navbar-nav a').eq(i).parent().addClass('active');
}