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!

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

HTML

Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points
Posted by Phil White
Phil White
Courses Plus Student 9,519 Points

How would i make a side bar that takes you too a part of a page when you click on a link?

I want to make a side bar using boot strap where you have four links on it (pictures in this case) and when you click on a picture it takes you to a part of the page and shows the information connected to the picture? Its a bit like the boot strap website itself...

1 Answer

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

An example would look like this:

<div id="whatever-you-want-to-call-it">
The content of your div here.
</div>

2) Link To Your Anchor Target To link to your anchor simply use:

<a href="#whatever-you-want-to-call-it">Link Text Here</a>

or if it's on another page:

<a href="pagename.html#whatever-you-want-to-call-it">Link Text Here</a>

For the sidebar, i would give it the property of position:fixed so its always visible.

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

Hi Again,

Okay so ive got that but how do i make a fixed side bar on the left side that sticks when scrolling and goes through the different pictures as you go down and is 100% height?

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

i get that but i don't get how i place it with html? what do i do to make it a vertical bar rather then a horizontal bar?

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

A vertical bar? You said you are using bootstrap, you can use the class .nav-stacked on a pill menu.

Or you can just create your own with an unordered list. By default all list tems stack.

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

Here you go I've put the site live so you can see what I'm trying to do. If you go on the about page i want the pictures on the left and then each paragraph to appear next to them on the right when you click on the picture

www.pixelsky.co

I've tried all of the above but nothing is working.

Thanks in advance!