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 October 14, 2014 3:45am by

nav reacts differently from video example

after adding the CSS to adjust the nav elements for desktop viewing, my nav floats right, but all of the nav links except the selected page link disappear. My code matches the project file, but here it is again:

  /********************
  PAGE: HEADER
  ********************/

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

Not sure whether the issue's in my HTML or CSS. Thanks!

--J

October 14, 2014 4:04am

JR;

Would you mind posting your HTML as well?

Thanks,

Ken

October 14, 2014 4:17am

Sure, Ken! I'm still figuring out Codepen, so pardon the long doc:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>J. R. Fleming | Design &amp; Illustration</title>
    <link rel="stylesheet" href= "css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Syncopate:700|Raleway:400,300,700' 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>J. R. Fleming</h1>
        <h2>Illustration | Design | Creative</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/1A1F_paintedpreview.jpg">
              <img src="img/1A1F_paintedpreview.jpg" alt="">
              <p>A selected background painting for an animated short by Moonsung Studios.</p>
            </a>
          </li>
          <li>
            <a href="img/2A_paintedpreview.jpg">
              <img src="img/2A_paintedpreview.jpg" alt="">
              <p>A selected background painting for an animated short by Moonsung Studios.</p>
            </a>
          </li>
          <li>
            <a href="img/3A_paintedpreview.jpg">
              <img src="img/3A_paintedpreview.jpg" alt="">
              <p>A selected background painting for an animated short by Moonsung Studios.</p>
            </a>
          </li>
          <li>
            <a href="img/4A_paintedpreview.jpg">
              <img src="img/4A_paintedpreview.jpg" alt="">
              <p>A selected background painting for an animated short by Moonsung Studios.</p>
            </a>
          </li>   
        </ul>
      </section>
      <footer>
          <a href="http://twitter.com/FlembotArtsitup"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/JRFleming.Art"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 J. R. Fleming</p>
      </footer>
    </div>
  </body>
</html>

Cheers, J

October 14, 2014 4:42am

JR;

One thing I noticed is that your logo id doesn't have quotes around the work logo.

Does the navigation have the same issue on all of the pages with the class of "selected"?

Ken

October 14, 2014 5:20am

Hi JR,

Can you post your entire 660px media query from responsive.css and the "HEADING" section from main.css?

It sounds a lot like you have at least a partially collapsed header.

October 14, 2014 3:34pm

Ken, thanks for pointing out the missing quotes! I fixed that but it didn't resolve the issue. And yes, the nav does have that issue with each link w/ the class "selected", so the only visible link is whichever page happens to be selected at the time.

Jason, here's my 660px media query from responsive.css:

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

  /********************
  PAGE: 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 #145058;
    margin-bottom: 60px;
  }

}

And the Heading section from main.css:

/********************
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: 'Syncopate', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-family: 'Syncopate', sans serif;
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

Thanks again for the help! Cheers- J

2 Answers

October 15, 2014 3:52am

JR;

Is your header background color set to #43878a? That is the same color as your non "selected" class elements so they might be physically on the page, just not visible as they are the same color as the background? The "selected" class nav element is set to #fff so it would indeed show up if that is the case.

Ken

October 15, 2014 5:46am

JR,

I think Ken might have it here. We'll have to wait to see what the header color is.

I looked over the css and all of the float related css seems to be in order. I don't think it's a header collapsing issue. In this project the links were white and when the header collapses because it's not floated then you end up having white text on a white background. It seemed like that could have been happening to you.

Since you have changed the colors then the problem might be what Ken is suggesting here. If your link color matches the header color then you won't see them. What happened in your 660px media query is that the background color for the nav was removed. If the 2 colors are the same then it may have been fine up to this point because the nav background was separating them.

A quick test you can do whenever you think this might be happening to you is to click and drag your mouse over the area and see if it highlights the text, If it does, then you know the text is there and you have a color problem.

October 15, 2014 7:05am

Haha, wow. Ken nailed it. I changed the color in main.css and it's all there. And Jason, thanks for the tip, that will save me some time if I space out about this in the future.

I appreciate your time, guys; cheers!

--J

October 15, 2014 7:20am

Glad you have it sorted out now. You have the option of selecting "best answer". It makes the forums work better when used appropriately. The answerer gets some points and recognition and it lets others who are helping know that it has been solved and they can move on to other questions.

October 15, 2014 3:31am

JR;

In main.css towards the bottom of the file in the COLORS section there is code for the nav a.selected elements. Would you mind posting that as well as looking through your main.css and responsive.css for any additional mentions of the selected class and nav.a elements?

It seems to me that if everything else is working with the exception of the nav elements that are not "selected" that there may be something in your CSS that is causing issues with your nav.a elements that are not in the selected class.

Ken

October 15, 2014 3:44am

Hi Ken! I'm almost certain it's something in the CSS. I had no issues with the nav until this video, and these changes I made in responsive.css. I have been playing with the code a bit to get a better feel for it between videos, so it's also possible that I messed something up in the HTML that I haven't noticed.

From the main.css COLORS section:

/* links */
 a {
  color: #43878a;
}

/* nav links */
nav a, nav a:visited {
  color: #43878a;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #fff;
}

There aren't any other references to the selected class, but here's the rest of my code for nav and nav a, just in case (from main.css):

/********************
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: 700;
  padding: 15px 10px;
}

Thanks!

--J

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?

JR Fleming

JR Fleming

nav reacts differently from video example

Ken Alger

Ken Alger

JR Fleming

JR Fleming

Ken Alger

Ken Alger

Jason Anello

Jason Anello

JR Fleming

JR Fleming

2 Answers

Ken Alger

Ken Alger

Jason Anello

Jason Anello

JR Fleming

JR Fleming

Jason Anello

Jason Anello

Ken Alger

Ken Alger

JR Fleming

JR Fleming