I am running into a problem and I’m not sure to resolve it. I have a bootstrap 4 navbar with scrollspy enabled so that the nav bar updates when you scroll through the different sections of the page.
I also have a jquery function that does smooth scrolling so that the page does not immediately jump when you click on a navigation link. I have two problems
My website: https://codepen.io/tidus198/pen/deWpvX
Problem is the nav bar scrollspy. The page by default does not make my first nav item active. I.e. the About nav item is not highlighted when you first visit the page or if you scroll all the way to the top of the page. If you scroll down a little bit, the About link becomes active in the nav bar. This is occurring because I made my navbar fixed so it scrolls along with the page. How do I get it to work so that the first nav item is active by default?
If you click on one of the nav items, it scrolls past the title of the section (i.e. shows content instead of heading). I fixed this by using the jquery smooth scrolling offset function to display the actual heading instead of the content right away. But the issue is if you click on Contact, the navbar displays Portfolio as the active item. How would I go about fixing this?
Any help would be appreciated.