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 trialLuke Bennett
10,265 PointsNav bar wrap around problem.
I have added 4 pages to the nav bar rather than 3 and my contact is wrapping underneath my other 3 page links as I resize the page.
How do I fix this? https://cl.ly/022P0g1V0w0s
Luke Bennett
10,265 Points <nav>
<ul>
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="about.html">About</a></li>
<!------------ PRODUCTS -------------------------------------
<li><a href="products.html">Products</a></li>
------------------------------------------------------------->
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
index.html
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 700;
padding: 15px 10px;
}
main.css
@media screen and (min-width: 660px) {
/*******************************************
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;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #a6a6a6;
margin-bottom: 60px;
}
responsive.css
Luke Bennett
10,265 PointsThank you!
3 Answers
Stephen Urena
705 PointsI would you consider using twitter bootstrap for your site, as it helps structure your site to be responsive, and sets the baseline across different browsers. (http://getbootstrap.com/)
if not, then on the responsive, you can try try...
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
// if you are trying to keep them inline, or if you want elements stacked you can use 50%
width: 100%;
display:inline-block;
}
nav a {
text-align: //to your preference;
width: 100%;
(open up the console, right-click on mouse, Inspect, to fiddle around with the style for the different responsive dimensions)
Michael Collins
3,447 PointsBasically your nav at 660px and above has a width of 45% of its container, which means there is not enough room for the list items to sit side by side.
You will have to increase the size of your nav to allow room for them to fit.
When doing this, you will also have to reduce the size of #logo down from 45% so that your nav and the logo sit on one line.
Darrin Fagley
12,432 PointsI was having the same problem and this worked beautifully.
Luke Bennett
10,265 PointsThank you! Got it!
Luke Bennett
10,265 PointsI will give bootstrap a go as well!
Stephen Urena
705 PointsStephen Urena
705 PointsGood morning, can you paste a copy of your code for the nav?