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 trialElena Paraschiv
9,938 Pointserror: navigation comes above the logo
@media screen and (min-width:480px){
/*******************************************************
ABOUT
*******************************************************/
#prime {
width:50%;
float:left;
}
#second {
width:50%;
float:right;
}
.par{
width:100%;
float:center;
}
}
@media screen and (min-width: 640px){
/*******************************************************
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;
margin-bottom:20px;
}
/*******************************************************
HOME PAGE
*******************************************************/
/*to make 3 columns
3 * 2*2.5%(each element has a 2.5% margin on both sides *2)=15
100-15=85%/3 (for all 3 images) =28.33333%
*/
#gallery li {
width:28.3333%;
}
}
@media screen and (min-width: 1024px){
body{
}
}
Elena Paraschiv
9,938 PointsIt looks like this. Imgur How can I make the nav look beneath the logo as in the video?
Jason Anello
Courses Plus Student 94,610 PointsHi Elena,
Can you post a snapshot of your workspace?
2 Answers
rdaniels
27,258 PointsI had the same problem as you following how Nick did it. I changed mine with relative settings, so that in large screens it is at the bottom, but then as the screen gets smaller it raises to the middle and then for small screens it is under the logo... This is how my nav section is (I kind of like the effect!)...
nav {
background: none;
float: right;
font-size: 1em;
margin-top: 8%;
margin-right: 5%;
text-align: right;
width: 45%;
}
rdaniels
27,258 PointsIn your index.html is your nav section located above your h1 tag in the header? If it is you'll want to put it right below your closing "a" tag.
Elena Paraschiv
9,938 Pointsno. its underneath the h1 tag.
<header>
<a href="index.html" id="logo">
<h1>Code_Africa</h1>
<h3>'Change their future, one code at a time'</h3>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected" >Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="involved.html">Get Involved</a></li>
</ul>
</nav>
</header>
Elena Paraschiv
9,938 PointsElena Paraschiv
9,938 Points