CSS

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

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

Chris Hall
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!!!