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

Having trouble making the elements stay active in the nav bar

I want to make the page that the user is on stay highlighted in the nav bar. Right now I have figured how to make it change color when hovered over but not how to make it stay a different color when on the page. I am trying to make the apps page stay green when on that page in the example attached. I have attached my code below. Thanks in advance http://codepen.io/Johned22/pen/pEdgOz

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I'm looking at the codepen and you haven't yet linked any of those files. But assuming that all pages are using the same navbar, you simply need to set the class "active" on the page that's currently loaded. For instance, the apps.html has the "active" class. But when you make your contact.html with the same navbar, remove the "active" class from the link to apps.html and place it in the link to "contact.html". Hope this helps! :sparkles:

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your response, this is what I have done and it didn't work which is why I am still confused. I have class="active"> in the apps html and it still does not work. Here is a example of three of the options on my nav bar. The apps page should be the active link and stay green when clicked on- <ul class="nav-list"> <li class=""><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li> <li class="active"><a class="active"> href="apps.html">APPS</a></li> <li class=""><a href="ebooks.html">EBOOKS</a></li>

What is wrong in my HTML for it not to work? Thanks in advance

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi! I made some changes. Essentially you need to put the "active" class on the link instead of the `<li>'.

Here's the altered HTML:

<nav class="nav">

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

</nav>

And here's the CSS:

* {
  list-style-type: none;
  text-decoration: none;
  color: blue;
}

nav li a:hover{
      background-color: black;
      display: block;
    }

.active {
    color: green;
}

Hope this does what you're expecting! :sparkles: