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 trialTrey Mosley
10,415 PointsWhy 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?
Chris Komaroff
Courses Plus Student 14,198 PointsYes, 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
Courses Plus Student 9,503 PointsIt 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
7,940 PointsThe answer to this question still seems to have not been given.
Callum Anderson
8,837 PointsCallum Anderson
8,837 PointsI 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.