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

Leigh Schindler
Leigh Schindler
4,648 Points
Posted by Leigh Schindler
Leigh Schindler
4,648 Points

Hello! Can someone please direct me to the lesson/video where we learn about single page nav links?

:) Hi! I am creating a one page website and I forgot the lesson where we learn how to link it with my nav bar so it scrolls down to the spot the viewer wishes to see.

Thank you for your help :)

4 Answers

Kelly von Borstel
Kelly von Borstel
28,880 Points
Kelly von Borstel
Kelly von Borstel
28,880 Points

I don't know if this is the video you're looking for, but it explains fragment identifiers towards the end of video, around 10:10. It shows how to do this with id #top, but I think you can do the same thing with any id.

So if you give a nav list items an href=#navName, then you can add the #navName to whatever element you want it to scroll down to. If you watch the last couple minutes of the video, it's explained better than I can. http://teamtreehouse.com/library/css-foundations/selectors/class-and-id-selectors

Leigh Schindler
Leigh Schindler
4,648 Points
Leigh Schindler
Leigh Schindler
4,648 Points

YUP! That's the video, thank you

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, Leigh, There is a workshop in the WordPress section called One Page WordPress Site, where it is explained how to do this with WordPress. But you need a Pro account to see it. But I guess that doesn't help you, does it?

Leigh Schindler
Leigh Schindler
4,648 Points
Leigh Schindler
Leigh Schindler
4,648 Points

Hi Maja, thanks for your response. Yeah, doesn't really help because I'm using Sublime text 2 but I appreciate you responding :)

Boris Vukobrat
Boris Vukobrat
4,248 Points
Boris Vukobrat
Boris Vukobrat
4,248 Points

Leigh, it seems to me you are looking for HTML Anchors lesson http://teamtreehouse.com/library/html/links/anchors/.

Here is in short: set an id attribute to an element where to jump; in anchor tag you should set href attribute with # (hash sign) and your id value. And anchor will lead you down to the id element.

<a href="#anchor1">Go to lorem ipsum</a>

...

<p id="anchor1">Lorem ipsum</p>

Hope this helps.

Leigh Schindler
Leigh Schindler
4,648 Points
Leigh Schindler
Leigh Schindler
4,648 Points

Yes!! Thank you so much :)