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 trialJR Fleming
838 Pointsnav 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
JR Fleming
838 PointsSure, 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 & 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>© 2014 J. R. Fleming</p>
</footer>
</div>
</body>
</html>
Cheers, J
Ken Alger
Treehouse TeacherJR;
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
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
JR Fleming
838 PointsKen, 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
Ken Alger
Treehouse TeacherJR;
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
Jason Anello
Courses Plus Student 94,610 PointsJR,
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.
JR Fleming
838 PointsHaha, 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
Jason Anello
Courses Plus Student 94,610 PointsGlad 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.
Ken Alger
Treehouse TeacherJR;
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
JR Fleming
838 PointsHi 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
Ken Alger
Treehouse TeacherKen Alger
Treehouse TeacherJR;
Would you mind posting your HTML as well?
Thanks,
Ken