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 trialJoana Gomes
1,070 PointsNavigation bar
I’m trying to understand why in my project, when I make exactly what Nick is telling us to do, it appears two lines in the navigation bar: CONTACT stands under ABOUT... But just for a certain size of the screen.
7 Answers
Joseph Potts
11,187 PointsHi Joana! Could you provide the code you wrote? It'll be much easier to tweak it and explain what went wrong.
Ana Cristina Patiño Aguirre
4,644 PointsI think there wasn't enough space to show it in a straight line
Joana Gomes
1,070 PointsHi Joseph! of course...I don’t now how to make this...maybe I should share you all the project?
i’ll try first to show you the part referring to the navigation in index.html and responsive.css... If is doesn’t work I will find a way to share all the project.
Thank you
<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>
@media screen and (min-width: 660px){
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
Joana Gomes
1,070 Pointsthe problem only appear when the screen has the width of exactly 660px.
Ana Cristina Patiño Aguirre
4,644 PointsI think you're missing this part of the code
nav li {
display: inline-block;
}
Also, try to give a certain width in pixels to the nav selector
Joana Gomes
1,070 PointsHello Cristina, Thank you for your answer.
I had already the display inline-block I changed the width in % and it works! but...i don’t really understand why.... I’m just starting the basics....
Joana Gomes
1,070 PointsOk! Thank you Ana.