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
Ankit Prasad
1,677 PointsBackground color changing problem
I'm using the HTML, CSS, and JS in the workspace. After attaching the plug-in files, if I follow instructions in the lesson, then adding the following to the CSS file:
.is-sticky header{ background-color:black; }
DOES work, and changes the color of the header when it docks.
HOWEVER, if I instead do
.is-sticky { background-color:black; }
the background doesn't change. Why am I not able to give a color to the entire encompassing div, but am able to give it to the child header?
2 Answers
Leon Segal
14,754 PointsThe header has a height when it has the class is-sticky
When you select just the class is-sticky though, the height is zero
Basically, the code is working, you just can't see it!
Try messing around with the dev tools in chrome and it should be clear...if not I'll try to help more.
Michael Lorenzana
12,029 PointsIt is better to specify the class name with .is-sticky .header {background: black;}, because header has a class of .header. The reason it doesn't show is because the .is-sticky class doesn't have a specific height, that's why you need to add the .header class to it that specifies the height.
Hope that makes sense.