Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Using Bootstrap Components Using ScrollSpy to Highlight Nav Links

Trey Mosley
Trey Mosley
10,415 Points
Posted by Trey Mosley
Trey Mosley
10,415 Points

Why does the data-offset not work the same as scrolling when clicking on links in the navbar?

The navbar seems to toggle through the nav links accurately to the data-offest while scrolling. When clicking on the nav links, it doesn't seem to follow the data offset (dropping to the same location below the heading as before setting the offset). Why is this?

Callum Anderson
Callum Anderson
8,837 Points
Callum Anderson
Callum Anderson
8,837 Points

I wondered the same thing, and it appears that data-offset is specifically designed for scrolling. It uses the window.onscroll event, which is why it won't apply to clicking on nav links.

Someone has kindly added a Codepen snippet of this functionality using vanilla Javascript.

Chris Komaroff
Chris Komaroff
Courses Plus Student 14,198 Points
Chris Komaroff
Chris Komaroff
Courses Plus Student 14,198 Points

Yes, I think more important to have offset for clicking than for scrolling. Maybe bootstrap will fix in future. You could put the navbar on side of screen, then offset would not be as necessary, but top navbar is better for responsive design.

Jeff Sanders
Jeff Sanders
Courses Plus Student 9,503 Points

It isn't the data-offset that is the problem but rather the sticky header. The sticky header will hide any anchor content by 100px (the height of the header).

This CSS rule seems to work to fix the issue.

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -100px; 
  height: 100px; 
  visibility: hidden; 
}

1 Answer

Furkan Demirtürk
Furkan Demirtürk
7,940 Points
Furkan Demirtürk
Furkan Demirtürk
7,940 Points

The answer to this question still seems to have not been given.