Help with bootstrap navigation bar and scrolling

General
1

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

  1. 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?

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

2

Resolved this issue from stackoverflow. Issue #1 was caused by the padding on the body. The extra padding was causing the header id to not be active. Removed padding from body and added it to the header instead.

Issue #2 is not completed resolved as removing the -80 from the offset works but not to the point I need it to. Some research required…

See i[dated codepen for new functionality

3

Resolved issue#2 as well.

Scrollspy function has an offset parameter. I set it as such:

$(‘body’).scrollspy({ target: ‘.navbar’, offset: 100 });
I offset it by 100 so that the nav item is highlighted 100px prior to where the actual id of the linked element is.

Also in the animate, I set the offset to be -80px from the computed top value.

$(clickedItem).offset().top - 80

So now, the clicked nav items go to the correct part of the page (i.e. the actual TITLE of the section instead of the content) and also the nav bar shows the correct value. I noted that playing around with these offset values is not required if your navbar is not fixed (i.e. is static). Seems to be working on both mobile/desktop.

Hope that helps someone else