Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

My nav links 'Portfolio About Contact' won't change colour when hovered over or selected.

Could someone help me as to where I have missed out the syntax here is the index.html and the main.css

<html>
<head>
  <meta charset="utf-8">
  <title>Ash Mbuguni | Front End Web Developer</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Changa+One' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <header>
    <a href="index.html" id="logo">
      <h1>Ash Mbuguni</h1>
      <h2>Front End Web Developer</h2>
    </a>
    <nav>
      <ul>
        <li>
          <a href="index.html" class="selected">Portfolio</a>
        </li>
        <li>
          <a href="about.html">About</a>
        </li>
        <li>
          <a href="contact.html">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
  <div id="wrapper">
<section>
  <ul id="gallery">
    <li>
      <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="">
        <p>Experimentation with colour and texture</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Experimentation with kids logo</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p>Experimentation with belly butter logo</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p>Experimentation with colour and texture</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>Experimentation with colour and texture</p>
      </a>
    </li>
  </ul>
</section>
    <footer>
      <a href="http://twitter.com/gunitunes">
        <img src="img/twitter-wrap.png" alt="Twitter Logo" class"social-icon">
      </a>
      <p>&copy; 2015 Ashvin Mbuguni</p>
    </footer>
  </div>

</body>

</html>
MAIN.CSS

/****************
GENERAL
****************/

body {
  font-family: 'Open Sans', sans-serif; 
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/****************
HEADING
****************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
    text-align: center;
    margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



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

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/****************
FOOTER
****************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/****************
PAGE: PORTFOLIO
****************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size:0.75em;
  color: #bdc3c7
}

  /****************
COLOURS
****************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color:#fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff; 
}

/* selected nav link */
nav a:selected, nav a:hover {
  color: #32673f; 
}

2 Answers

Hi Ashvin,

You have a problem in your css at the end:

/* selected nav link */
nav a:selected, nav a:hover {
  color: #32673f; 
}

You used a:selected but "selected" is a class in your html and should be preceded by a period.

Try nav a.selected

a:hover is ok because that's a pseudo class. You'll use colons with pseudo classes and periods with classes that you've put in your html.

Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Thank you Mr Anello, much appreciated!

You should try this CSS:

nav ul li a:hover {
  color: #32673f; 
}
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

Where abouts should I add it? In the colors section of the CSS under the 'selected nav link'?

Yes, under the "selected nav link", the best way to test CSS is to place the new code at the end of the CSS style sheet