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 trialJonathan Starr
3,181 Pointsfont color and space directly behind font not changing colors on nav bar
I copied the CSS just as the instructor has it, his font changes colors mine does not. Do we know why?
Caroline Hagan
12,612 PointsJonathan Starr if you can copy and paste your code here, or use a tool like Codepen.io we can help you further.
Jonathan Starr
3,181 PointsHere is my code:
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align: center;
margin: 0;
}
a {
color: #6ab47b;
}
header {
background: #6ab47b;
border-color: #599a68;
}
h1, h2 {
color: #fff;
}
nav {
background: #599a68;
}
nav a, nav a:visited {
color: #fff;
}
2 Answers
Isaac Al-Wahaibi
6,522 Pointsthe below code maybe will solve your problem ;)
a {
text-decoration: none;
}
h1, h2 {
color: #fff;
}
p {
color: #000;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
you can use "Markdown Cheatsheet" in future posting your code will be more clear for others to read your code
Jonathan Starr
3,181 PointsYeah, I was not completely clear in my question. What is happening is on the nav bar my link text is showing up with a white background and black text but i am wanting a green background (like the header) with greener text. What would I need to change? What you are suggesting is that I change my nav links color to white? and a paragraph text color?
/****************
GENERAL
****************/
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
/****************
HEADING
****************/
#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.75 em;
margin -5px 0 0;
font-weight: normal;
}
/****************
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: #599a68;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Caroline Hagan
12,612 PointsJonathan Starr try looking at this demo on jsfiddle : https://jsfiddle.net/blueocto/016gf5zd/1/
I've guessed your markup, but essentially your links were the same colour as the background, or too close a green. I've changed them to white so you can see the difference.
Isaac Al-Wahaibi
6,522 PointsIsaac Al-Wahaibi
6,522 Pointsshow your code, so we can understand the problem