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

Watch Video

Posted December 10, 2015 12:40pm by

Nav does not appear in header after breakpoint for desktop version

After eliminating the background for the nav bar, my header background (that basic green color) doesn't appear behind the nav. I have a white background to a white text. I am unsure of where I went wrong, or if I did. I can paste any code here but am unsure of which file is relevant for this... could it even be in the HTML?

December 10, 2015 12:57pm

you should put your html and css code here in order to see what went wrong.

December 10, 2015 1:03pm

Here is my responsive.css

@media screen and (min-width: 480px) {

/*********************************
TWO COLUMN LAYOUT
*********************************/
  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
}


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

#gallery li {
  width: 28.3333%;
  }

#gallery li:nth-child(4n) {
    clear: left;
  } 



/*********************************
PAGE: ABOUT
*********************************/

.profile-photo {
  float: left;
  margin: 0 5% 80px 0;
  }  



@media screen and (min-width: 660px) {

/*********************************
HEADER
*********************************/

    nav {
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;
    }  

    #logo {
      float: left;
      margin-left: 5%;
      text-align: left;
      width: 45%;
    }

    h1 {
    font-size: 2.5em;
    }

    h2 {
      font-size: 0.825em;
      margin-bottom: 20px;
    }

    header {
      border-bottom: 5px solid #599a68;
      margin-bottom: 60px;
    }

  }

December 10, 2015 1:04pm

And 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%
}

h3 {
  margin: 0 0 1em 0;
}

/*********************************
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
}


/*********************************
PAGE: ABOUT
*********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/*********************************
PAGE: CONTACT
*********************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}


/*********************************
COLORS
*********************************/

/* 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;
}

December 10, 2015 1:04pm

and html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Keith Corona | Design Student</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Keith Corona</h1>
        <h2>Design Student</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 color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/genuineenglish"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/keithcorona"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Keith Corona.</p>
      </footer>
    </div>
  </body>
</html>

2 Answers

December 10, 2015 9:17pm

You have two typos in main.css, img tag (general) should end with ; . Second is the in main.css header tag float:: left; (heading) it should be float: left; with one : after float. Simple typo error.

December 10, 2015 9:23pm

You caught another error I had missed, thanks!

December 10, 2015 9:02pm

I found my error. In my responsive CSS I mistyped

float: left;

with

float::left;

December 10, 2015 9:18pm

Great!!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Keith Corona

Keith Corona

Nav does not appear in header after breakpoint for desktop version

Jonathan Kim

Jonathan Kim

Keith Corona

Keith Corona

Keith Corona

Keith Corona

Keith Corona

Keith Corona

2 Answers

Jonathan Kim

Jonathan Kim

Keith Corona

Keith Corona

Keith Corona

Keith Corona

Jonathan Kim

Jonathan Kim