Bootstrap navbar not active when top of the page

1

when the page is first loaded and the scroll is at the top of the page, the “page1” tab of the navbar shows as active. But when you scroll down and then scroll back up to the top of the page, the “page1” doesn’t show active anymore.

I tried adding an id to the the list element page1 and then adding the class ‘active’ to it when scrolled to the top of the page but that doesn’t fix anything.

Does anyone know why this is happening and how to fix it?

2

It’s working for me. Try it in an incognito tab, it could possibly be a cache issue.

3

Thanks for the reply. Tried in incognito mode, but page 1 still doesn’t show as active when you scroll to the very top of the page after a little bit of scrolling down first. Is there a reason why the cache would be a problem here?

4

When using Scrollspy you have to account for the navbar’s height with the “offset” property. Set an offset (which should be more or less the height of your navbar) during the scrollspy init and it’ll work:

$('body').scrollspy({
  target: "#myNavbar",
  offset: 50
});

It was active the first time 'cause the first <li> of your nav already has an active class in your HTML. You can remove that as well.

5

This worked! thank you for your help.