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 trialHoormazd Kia
Courses Plus Student 6,075 Pointsadjusting navigation for 660px screens and larger
around 2:16 Nick begins styling the nav rule under our second media query. Placing the following code...
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
I checked my work over and over again and can't find out what i'm doing wrong, but the nav menu drops down as if it was outside of the header. Since the default of our nav menu text color is white, they vanish save for the selected page.
Can anyone help me with this?
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsAre you fine below 660px? Did the problem only begin once you added the nav
rule to that media query?
Maybe post your css for that media query. https://teamtreehouse.com/forum/posting-code-to-the-forum
Or put your html/css in a codepen to make it easier to troubleshoot.
Tommy Gebru
30,164 Pointsnav a{ color: } To change the color of text. And nav li{ display:inline} To change the drop down list in becoming horizontal
Hoormazd Kia
Courses Plus Student 6,075 PointsFirst off thanks for the response!
earlier tutorial used display:inline-block for width and height. Nav a color would make the menu appear, but that still doesn't change the fact that the nav is in the wrong place.
If you click on the video and open the responsive.css from that tutorial you will see there's a media query attached where if the digital screen exceeds 660px the navigation should appear to the right of the logo (horizontally with its width and height in tact). When i test my code I cannot mimic this, when my browser is stretched past 660px the nav "drops" down to the right of the first image instead of "rising" to the right of the logo.
My css and html files have been practically identical to the tutorials. I can't find anything wrong with my code and I've compared every line to the completed version. Aside from comments, everything looks fine.
Hoormazd Kia
Courses Plus Student 6,075 PointsHoormazd Kia
Courses Plus Student 6,075 PointsHi Jason,
Thanks for the advice and yes, the problem starts when I add the nav rule to to the following media query
I figured the issue might be that I was using a different font style and the width might be an issue. Sure enough, when I decreased the width the 40% it partially solved the problem, however, there's something else wrong with my code. Under the tutorial's main.css file (this is the responsive.css file) the header rule is coded to float left. Toying with the code, I repeated this rule to see if it fixed the problem and sure enough it did...
(EDIT: Solved the issue. Amazing how you can look over the same block of text and not see it...) I finally went to http://jigsaw.w3.org/css-validator/ and it found a syntax error in my main.css file. Time for a break!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsGlad you got it worked out. So because of the syntax error your header float: left from main.css wasn't taking effect. This caused the header to collapse which I think was what you were seeing.
Normally a parent will not contain its floated children. Floating the parent is one way to get it to contain its floated children.
Not sure if you knew this already but I thought I'd mention it.