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
Stephen Smith
7,426 PointsHaving problems getting my nav-bar selections to stay highlighted when clicked so that you know which page your on.
Having problems getting my nav-bar selections to stay highlighted when clicked so that you know which page your on. Works ok when hovered.
HTML:
<nav class="main-nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="treatments.html">Treatments and Prices</a></li> <li><a href="#">Make-up</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <!-- end main-nav -->
CSS:
nav a { color: #6d447c; }
nav ul li:hover, nav ul li:hover a { color: #ffffff; background-color: purple; }
nav li { font: 1.5rem 'Courgette', cursive; padding: 1.5rem 1.25rem 1.5rem; }
Can anybody help me with the correct code for this. Have tried everything!
2 Answers
Connor Walker
17,985 PointsIf I were you I'd give the anchor tag that displays the page that you are on with an ID of something like selected. That ID can then be targeted to give it different styling, like this:
<nav>
<li><a href=#>Home</a></li>
<li><a href=# id="selected">Treatments and Prices</a></li>
<li><a href=#>Contact</a></li>
</nav>
#selected {
color: red;
}
Stephen Smith
7,426 PointsThanks mate. Sorted now.