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 Donna Wilkins
Donna Wilkins
3,605 Points

Links on nav bar

When a visitor to my site clicks a link for a page, once the page displays, I want the "clicked" link to change from dark grey to white so user knows what page he is on. Have tried :active and :hover which do flash white but I want the selected link color to remain white so user will know where he is in the navigation . Have tried to add class:selected to HTML and then styled but nothing is working.

Donna Wilkins
Donna Wilkins
3,605 Points

Oops! Thanks, Greg. I've got it now!

2 Answers

Greg Kaleka
Greg Kaleka
39,021 Points

Hi Donna,

What you need to do is have a class for the "selected" nav element. You can do this dynamically if you have a dynamic site, or you can do it by hard-coding the class in each page. For example, if you have an "About" page, your li for About should look like this on the About page.

<ul>
  <li>Home</li>
  <li class="selected">About</li>
  <li>Contact</li>
</ul>

Then you'll set up a CSS rule for that class. Make sense? You'd have the same thing set up on the "Home" and "Contact" pages. Again, if it's a static page, you'll do this manually. If it's dynamic, you'll have your logic set this in your header depending on what page you're on.

Donna Wilkins
Donna Wilkins
3,605 Points

Thank you, Greg but it's not working for me. Here is my code: <nav> <ul> <li class="selected"><a href="index.html"> Home</a></li> <li class="selected"><a href="welcome.html"> Welcome</a></li> <li class="selected"><a href="Ministries.html"> Ministries </a></li> <li class="selected"><a href="Activities.html"> Activities</a></li> <li class="selected"><a href="Who We Are.html"> Who We Are</a></li> <li class="selected"><a href="Get Involved.html"> Get Involved</a></li> <li class="selected"><a href="Calendar.html"> Calendar</a></li> <li class="selected"><a href="Contact.html"> Contact</a></li> </ul> </nav>

Then this is my CSS: nav { width: 100%; float: left; margin: 0; padding: 0; background-color: darkgrey; }

nav ul { margin: 0; padding: 0; text-align:center; } nav li { float: left; list-style: none; }

.selected { background-color: white; color: darkgrey; }

nav li a { display: inline-block; padding: 8px 15px; text-decoration: none; text-transform: uppercase; border-right: 1px solid #ccc; /* text-align: center;*/ font-size: .80em;
}

I THINK that I did as you suggested but no luck.... Donna

Greg Kaleka
Greg Kaleka
39,021 Points

Donna - you're close, but you've set everything as selected! You need to only set the current page as selected, otherwise your styles will be applied to all the links. Note that the "selected" class could be named anything you want. There's nothing special about that word.

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Donna,

Are you building a static HTML site or a dynamic site with a language like PHP (perhaps a WordPress site)?

Erik