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 trialLeslie Pico
4,190 PointsHeader is wrong above 660px
My site looks great when the browser is set to 660px or less but when I go above that, after editing the media query for desktops my header and logo change to the same colors that I have my #gallery text and background color set to. What am I doing wrong?
Edit! Forgot to add http://cdpn.io/djtnc
5 Answers
Travis Thompson
12,976 PointsHey Leslie,
It looks like you are wrapping your <nav> element outside your <header> element in your html. You will need to add a css property of overflow: hidden to your <header> since you have both your <nav> and #logo floated. This way you will see your purple background past 660px.
Try this:
<header>
<a href="index.html" id="logo">
<h1>Leslie Helen Pico</h1>
<h2>Developer</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>
Then in your css do this:
header {
border-bottom: 5px solid #7b6ab4;
margin-bottom: 60px;
overflow: hidden;
}
Leslie Pico
4,190 Pointshttp://cdpn.io/djtnc Here is my code
Travis Thompson
12,976 PointsLooks like the html and css markdown didn't work at first. Looks like it is good to go now. Happy building!
Leslie Pico
4,190 PointsThank you so much!
Bryan Jenkins
5,438 PointsIn this case, it looks like your header stays at about 119px through the responsive transition. In that case, you could always define the height of your header.
header {
height: 119px;
}
and another issue, as Travis pointed out, is the <nav> element is currently outside of the <header> tags. So just copy the nav block and paste it inside your header tags after the logo link.