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 John Levy
John Levy
1,451 Points

How to make the text in the nav bar on the page you are on stay highlighted

I am trying to make the text on the page I am on stay highlighted while on that page. I dont want the background on the text to change color I just want to the text to be bold and change color. Right now I have managed to make it stay bold but I cant make the color stay black while on the page. Where have I gone wrong? I am using the page "apps for my example. I have attached my code below- HTML- <nav class="nav">

<ul class="nav-list"> <li class="nav-item"><a href="contact.html">CONTACT</a></li> <li class="nav-item"><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li> <li class="nav-item" id="active"><a href="apps.html">APPS</a></li> <li class="nav-item"><a href="ebooks.html">EBOOKS</a></li> <li class="nav-item"><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li> <li class="nav-item"><a href="home2.html">HOME</a></li>

</nav>

CSS- .nav-item a:hover { color: black; }

#active { color: black; font-weight: bold; }

6 Answers

Rich Zimmerman
Rich Zimmerman
24,063 Points
Rich Zimmerman
Rich Zimmerman
24,063 Points

You can try changing your class of "nav-item" to an ID instead. Then just for the nav-item of the page you're on, designate the class to something like "class='selected' " and set the font weight to bold. It would look something like this..

<li id="nav-item"  class="selected"><a href="ebooks.html">EBOOKS</a></li> 
<li id="nav-item"><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li> 
<li id="nav-item"><a href="home2.html">HOME</a></li>

And then you can add your CSS

.selected {
  font-weight: bold;
}
John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your response. I made the changes you suggested but it still does not stay black when on the page I selected. it only changes black if I hover over it. How do I make the text stay black on the selected item? Thanks

Rich Zimmerman
Rich Zimmerman
24,063 Points

Do you have any additional CSS styles for those items? Try removing the :hover styling and just set 

.selected {
  color: black
}
John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

No I dont have any other CSS styles for those. It still does not turn black. It turns bold so something is working but the color will not change

Rich Zimmerman
Rich Zimmerman
24,063 Points
Rich Zimmerman
Rich Zimmerman
24,063 Points

What color is the text now? They should be black by default if there is no other designated styles

Rich Zimmerman
Rich Zimmerman
24,063 Points
Rich Zimmerman
Rich Zimmerman
24,063 Points

Sorry I may have misunderstood. Try this

a:visited {
 color: black;
}
John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

No you had it right the fiorst time I think. I dont want the page to be a different color after they have visitied, just while they are on the page. I do have this in my code for the text in the nav bar

nav-item a {

display:inline-block; color: red; text-decoration: none; }

The issue is now even when I do .selected {color: black} it still stays red and do not understand why.

Rich Zimmerman
Rich Zimmerman
24,063 Points

.selected is on your li element whereas ".nav-item a" specifies the a element within the li. So try changing ".selected" to ".selected a"