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
Paul Jackson
8,943 PointsTrouble with "Selected" links
In the video, Mark shows us that the nav links will stay their highlighted color to show the visitor what page they are on. My links are highlighted correctly when hovering, but it goes back to it's regular color when I'm not hovering. Any idea what I'm doing wrong that the "selected" nav link doesn't stay highlighted while visiting that certain page?
10 Answers
Marlon Henry
6,885 PointsYou have class: when it should be class=
Jason Anello
Courses Plus Student 94,610 PointsHi Paul,
It sounds like you have a problem with the "selected" class in your main navigation.
Here's the nav from index.html:
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Notice that the index link has the "selected" class. On each new page that you have you need to move that class to correspond to which page you're on.
Paul Jackson
8,943 PointsThanks Jason,
I looked again and found that I have that done correctly. In my "index.html" page the index link has the 'selected' class, and so on for the About and Contact pages.
Jason Anello
Courses Plus Student 94,610 PointsWhat about your css then?
What do you have for your selected class?
From main.css:
nav a.selected, nav a:hover {
color: #32673f;
}
This is what's responsible for setting the color on both the hover state and the link that has the "selected" class.
Jason Anello
Courses Plus Student 94,610 PointsPerhaps check if you've accidentally added a space nav a .selected
Or spelled it wrong
Paul Jackson
8,943 PointsHere's what my CSS looks like. Maybe I'm overlooking something?
'''CSS /******************************** COLORS *********************************/
/* site body */ body { background-color: #fff; color: #999; }
header { background: #800000; border-color: #599a68; }
/* nav background on mobile */ nav { background: #800000; }
/* selected nav link */ nav a.selected, nav a:hover { color: #000; }
/* nav links & logo text*/ a, h1, h2 { color: #fff; } '''
Paul Jackson
8,943 PointsObviously I don't know how to make my code appear the same way you did in your previous examples too... :/
Jason Anello
Courses Plus Student 94,610 PointsHere's a discussion on how to post code in the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum
Marlon Henry
6,885 Points.nav, .selected a{
color: #32673f;
}
Paul Jackson
8,943 PointsThe hover part works. The font just won't stay black when you're on that particular page. It's as if the class part just isn't working...
Jason Anello
Courses Plus Student 94,610 PointsCan you post the html for the nav for one of your pages? The forums will strip out html so check the link I provided.
Your css looks correct.
Paul Jackson
8,943 PointsHere's the html for the home page:
<nav>
<ul>
<li><a href="index.html" class:"selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
And from the about page:
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class:"selected">About</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
And the Contact page:
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="Contact.html" class:"selected">Contact</a></li>
</ul>
</nav>
Paul Jackson
8,943 PointsThanks again, by the way, for your help on this. I'm not sure what's going on. I know some parts in this particular track have disclaimers that stuff might not work correctly on Firefox. I've tried it with Safari too though and it's still doing the same thing.
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.
It's my fault. I should have asked for both html and css in the beginning and it would have saved some back and forth.
I mentioned the problem in another answer here.
Also, be careful, you have href="Contact.html" Change to lowercase 'c'
Jason Anello
Courses Plus Student 94,610 PointsYou have used a colon instead of equal sign.
Should be class="selected" not class:"selected"
Paul Jackson
8,943 PointsGood God... duh... I knew it would be something miniscule like that. Thanks so much!!!