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

Posted by daniel aguilar
daniel aguilar
4,361 Points

Navigation Selection

Hello can anyone tell me how to make it so that when i select a tab in my navigation it is selected and different color? so if i select my home tab it is darker than the others, and when i select my about tab, the home tab goes back to normal and the about tab changes to the darker color?

Blaize Pennington
Blaize Pennington
13,879 Points

When you say select, do you mean hover over or actually click on?

daniel aguilar
daniel aguilar
4,361 Points

clicked on, like for example if im on the homepage, i want that page tab to be darker than the others

1 Answer

Blaize Pennington
Blaize Pennington
13,879 Points

The easiest way to do this is to add the class ".selected" to your current page on the navigation.

Then using the CSS override the background color of the link.

If you are just using HTML and CSS, just do this manually.

daniel aguilar
daniel aguilar
4,361 Points

but when i do that and switch tabs, the homepage stays selected

Blaize Pennington
Blaize Pennington
13,879 Points

Then on your about.html page or whatever, switch the class from the home link to the about link. Unless you are using a dynamic language, you have to do all of this manually.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

aguilardaniel410 ,

The "How to Make a Website" course will show you how to do it manually and the "Build a Simple PHP Application" will show you how to do it dynamically on the server side using php.

Both of these courses will show you how to do what Blaize Pennington is talking about.