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 chris merola
chris merola
Courses Plus Student 674 Points

how to make a visited link color remain highlighted, so a visitor knows which page they are on

Hoping someone can help me. I am rather stuck? i have a navigation bar with all text links color: #000 /on hover text is red w/background color#efefef/ on click… link takes you to say my" about" page, say i wanted the text to remain red and the background to change, once visitor has clicked link

How can I make this work so a visitor to my site will know which page they are on?thank you for the help.

5 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Chris,

The way this is done in the "How to Make a Website" course is to use a "selected" class for the page you're on.

For example,

<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>

This is taken straight from "about.html" from that course. The "selected" class is placed with the link for whatever that page is.

Then in you css you give the same styles to both the :hover state and the "selected" class.

a:hover,
a.selected {
  color: red;
  background: #efefef;
}
Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Hi Chris,

See if this article helps you out.

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

xxxxxx;

Donnie Reese
Donnie Reese
17,211 Points
Donnie Reese
Donnie Reese
17,211 Points

You could have a unique class for each page on your website. Then you could have a class for your navigation menu that was something along the lines of "active" or "current" or something relevant. Then, just select the menu item from the body class.

CSS:

nav.site_menu a {
  text-decoration: none;
  color: tomato;
}

body.contact a.current {
  //code to show this is the current page
  text-decoration: underline;
  color: red;
}

HTML:

<body class="contact">
  <h1>Contact Me</h1>
  <nav class="site_menu">
    <a href="domain.com/">Home</a>
    <a href="domain.com/portfolio/">Portfolio</a>
    <a href="domain.com/contact/" class="current">Contact</a>
  </nav>
</body>

This is just one way to do this. Hopefully, someone else might show some of the other ideas. Good luck!

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points
John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi chris merola

I hope I can help you with this. The way I usually accomplish this, is in your css document, create a class called something like active and set it's css properties to whatever you need.

For example:

.nav {
your general nav css here
}

.active {
color: red;
background-color: red;
or whatever your active css would be
}

Then on your navigation bar html, you can just add 'active' to the class for the navigation page you are on. For example:

<li class="nav">Home</li>
<li class="nav active">About Chris</li>
<li class="nav">Contact Me</li>

In this example, if the user is on the About Chris page, the li element for the About Chris page will have the 'active' css properties applied.

Hope this helps

Keep up the good work