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 change the element color when the user is on the page

I have a menu which consists of three options. I want the option the user is on to to change color and stay that color while the user is on that page. Also I want to make a back border around the whole menu bar but I am also having trouble doing that. I have attached my code below so what changes do I need to do to make the element change color and stay that color when the user is on that option and also how to place a black boarder around the entire menu? Thanks in advance http://codepen.io/Johned22/pen/JRAyNE

2 Answers

Timothy Blubaugh
Timothy Blubaugh
9,522 Points

One way to do it is to add a class to that link on its page... Here's an example. Hope this helps! 

<nav>
    <a href="home.html" class="active"><li>HOME</li></a>
    <a href="about.html"><li>ABOUT</li></a>
    <a href="contact.html"><li>CONTACT</li></a>
</nav>

a:hover {
    background: blue;
}

.active {
    background: blue;
}
John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks , that solved my problem

Timothy Blubaugh
Timothy Blubaugh
9,522 Points

You're welcome!