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
John Levy
1,451 PointsHow to keep the element highlighted when the page is clicked on.
How do I make the element in the nav bar of the page that is clicked on highlighted by either the page I am on the text changing color or a different color box around the page I am on? Right now I mange to make it change color by hovering over it but it does not stay that color when I click on the page. Thanks in advance
Mikkel Rasmussen
32,971 PointsDo you mean like the treehouse menu - there the text is white depending on which page you are on?
7 Answers
John Levy
1,451 PointsYes like the treehouse menu
Mikkel Rasmussen
32,971 PointsYou can add a class or id to the link
Example:
<a href="#">Front page</a>
So then the user is on the front page the link should look like this
<a href="#" class="active">Front page</a>
Mikkel Rasmussen
32,971 PointsOf course you still need to make the actual class in the css :)
.active {
background-color: red;
}
John Levy
1,451 PointsIt is still not working. I am trying the code on the first page (home2.html). Where am I going wrong? This is the code am using- HTML <div id='nav'> <nav> <ul class="nav"> <li><a href="home2.html" class="active">HOME</a></li> <li><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li> <li><a href="indexdesktop.html">EBOOKS</a></li> <li><a href="apps.html">APPS</a></li> <li><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div>
CSS- .active { background-color: red; }
Belve Marks
7,332 PointsThese might be typos: you seem to be missing an closing </nav>. There's also an ampersand in there that may cause problems ( & ). Although This seems to work as typed (moved the css into a style section instead) in Chrome. Are your head links to the CSS file correct?
John Levy
1,451 PointsOk the HTML for one of the links is this- <div id='nav'> <nav> <ul class="nav"> <li><a href="home2.html" class="active">HOME</a></li> The CSS is this- .active { background-color: red; }
It still does not work, where am I going wrong? Thanks
David Schriever
1,777 PointsTry this
nav a.active {
background: red;
}
no space between the a and the .active
John Levy
1,451 PointsHello
That did not work but I changed the CSS to- nav a:active {
background: red;
}
That made it go red when I click on it but I want it to stay red when the user is on that page. How do I make it stay red when the user is on that page? Thanks in advance
Mikkel Rasmussen
32,971 PointsDo each of the pages have their own navigation or are they both using the same?
David Schriever
1,777 PointsHey John, might the problen be, that you didn't change the class=selected to the element of the page you are on? Meaning that if you are on the index page, index has the class selected, if you are on contact, contact and only contact has the class selected.
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsShould the last element clicked stay the same or should the colors be permanent after clicking on them once?
For example, if you have a navbar with 3 elements and you click on (1) and then on (2) - should only (2) have the new color since it's the last element clicked or both (1) and (2)?