Scroll spy not working (with Bootstrap 4)

I have been working on this problem for several hours.

I have read the 2 pages of scrollspy several times and posts in the forum .The problem is not solved.


My codepen of personal portfolio: https://codepen.io/yingjiehu/pen/jajwGd

Several problems:

  1. The menu is not highlighted when the page is scrolled down.
  2. When the width of the page is small, the menu becomes a list. But I click the button of the list, the list does not appear.

I am posting the answer in the chat room, but I am going to also post here.

the first problem is that in your JavaScript code, you have identified the wrong target. Changing it to $('body').scrollspy({ target: '.navbar' }) - using .navbar as the target, gets it going in the right direction. The first link for “ABOUT” is remaining highlighted, though, so there is another problem. Still investigating that.
Just remove the active class from the “ABOUT” link - it will higlight as you scroll down.

1 Like

Thank you.:hibiscus: