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 Sarah Hoopes
Sarah Hoopes
6,304 Points

How to keep a nav link highlighted after it's been clicked

I'm making my first website and ran into a problem. The nav has several images that link to other pages (bio, contact, etc.) I used :hover to make a colored box appear around each link. This works fine.

Now I want the colored box to stay around the link after it has been clicked and while you are on the corresponding page. I tried using :active and about a million other thinks that didn't work. Any suggestions?

I'm also trying to paste in my code....

/***************************************
NAVIGATION
****************************************/

nav {
  text-align: center;
}

nav ul {
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

nav a img {
  height: 60px;
  width: auto;
  padding: 10px;

}

 .films:hover {
  background-color: #2d6034;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

.reels:hover {
  background-color: #ff7f00;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

.bio:hover {
  background-color: #f7b61e;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
  }

.funStuff:hover {
  background-color: #316698;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

.links:hover {
  background-color: #2d6034;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

.contact:hover {
  background-color: #ff7f00;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

.shop:hover {
  background-color: #f7b61e;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

header>
       <a href="index.html" id="logo"><img src="img/mainefish_banner.png"></a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected"></a></li>
          <li><a href="films.html"><img class="films" src="img/films_button.gif"></a></li>
          <li><a href="reels.html"><img class="reels" src="img/reels_button.gif"></a></li>
          <li><a href="bio.html"><img class="bio" src="img/bio_button.gif"></a></li>
          <li><a href="fun.html"><img class="funStuff" src="img/funStuff_button.gif"></a></li>
          <li><a href="links.html"><img class="links" src="img/links_button.gif"></a></li>
          <li><a href="contact.html"><img class="contact" src="img/contact_button.gif"></a></li>
          <li><a href="shop.html"><img class="shop" src="img/shop_button.gif"></a></li>
         </ul>
       </nav>
      </header>

1 Answer

Chris Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points
Chris Hall
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points

Hey Sarah!

I made an example for you to play with over on codepin. http://codepen.io/C187/pen/qEXzVw Hopefully it'll clear some things up. The HTML and CSS of the pin is as follows..

<body>
  <header>
    <div class="nav">
      <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="bio"><a class="active" href="#">Bio</a></li>
        <li class="contact"><a href="#">Contact</a></li>
      </ul>
    </div>
  </header>
</body>

body {
  margin: 0;
  padding: 0;
  background: #f7f8fa;
}

.nav ul {
  list-style: none;
  background-color: #282d31;
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  font-family: "Open Sans", sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #019fc2;
}

.nav a.active {
  background-color: #f7f8fa;
  color: #019fc2;
  cursor: default;
}


/* Because Codepin haha */
@media screen and (min-width: 700px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }

  .nav li {
    display: inline-block;
    margin-right: -4px;
  } 
}

So we put the class="active" onto the a of the current page in this case.

I'm going to suggest you make a copy of your nav but with out images and use colors. Just to make sure it works as you wanted before adding an the images. Then put back in the images. I know it's an extra step, but you have no clue how many times I figured out where I was messing up at by going back to the basics. :)

When you do get everything working as you wanted might I suggest we DRY up your CSS a little. You don't need to declare all of those rotations each time. You could do this...

/* rotations */
.films:hover, .bio:hover, .links:hover, .shop:hover {
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

.reels:hover, .funStuff:hover, .contact:hover {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

/* colors */

.films:hover {
  background-color: #2d6034;
}

.reels:hover {
  background-color: #ff7f00;
}

.bio:hover {
  background-color: #f7b61e;
}

.funStuff:hover {
  background-color: #316698;
}

.links:hover {
  background-color: #2d6034;
}

.contact:hover {
  background-color: #ff7f00;
}

.shop:hover {
  background-color: #f7b61e;
}

Or you could do this..

/* rotations */
.nav-rotate-neg-two-deg:hover {
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

..nav-rotate-pos-two-deg:hover {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

/* colors */

.films:hover {
  background-color: #2d6034;
}

.reels:hover {
  background-color: #ff7f00;
}

.bio:hover {
  background-color: #f7b61e;
}

.funStuff:hover {
  background-color: #316698;
}

.links:hover {
  background-color: #2d6034;
}

.contact:hover {
  background-color: #ff7f00;
}

.shop:hover {
  background-color: #f7b61e;
}

Note: For housekeeping I'm deleting my last two comments.

Sarah Hoopes
Sarah Hoopes
6,304 Points

THANK YOU SO MUCH!!!!! You have no idea how many hours I spent trying to figure this out....

Chris Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points
Chris Hall
.a{fill-rule:evenodd;}techdegree
Chris Hall
Full Stack JavaScript Techdegree Student 11,442 Points

Oh trust me, I do. We all do! Haha. Once I spent two days attempting to figure out why something wasn't rendering. Turns out it was being over written. It's the small things that get us. :) Keep up the good work!!!