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 trial
John Levy
1,451 PointsThe elements in the nav bar fall in the wrong order when I shrink the page.
I have set up my nav bar so all the pages are in one line. When I shrink the page using media queries they drop down to two lines. The problem is the two pages that should be first in the nav menu drop to the second line first rather than the last two elements. What do I need to change so that the last elements in the nav bar are the first to drop to the second line? This is the code I used- HTML- <ul class="nav-list"> <li>PAGE 1</li> <li>PAGE 1</li> <li>PAGE 2</li> <li>PAGE 3</li> <li>PAGE 4</li> <li>PAGE 5</li> </ul>
CSS- .nav { background-color: grey; font-size:16px; padding-top: 55px; padding-right: 6px;
}
nav ul { margin: 4px 0px 0px 0px; width: 50%; float: right; }
.nav-list { float:right; display:inline-block; padding:0px 0px 4px 10px;
}
.nav-list a { display:inline-block; color: blue; background: none; text-decoration: none; float:right; padding:5px;} }
nav ul { margin: 4px 0px 0px 4px; width: 58%; float: right; display: block; }
Thanks in advance
5 Answers
marco vazquez
5,880 PointsTry this code, it still needs some changes to deal with general layout when you shrink the browser window, but your main problem of home being the one to move to the next line rather than the contact page should be resolved. Hope this helps! let me know if you have any other issues!
HTML:
<!DOCTYPE html> <html>
<head> <title>test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="test.css" type="text/css"> </head>
<body>
<ul class="nav-list"> <li><a href="home2.html">HOME</a></li> <li><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li> <li><a href="ebooks.html">EBOOKS</a></li> <li><a href="apps.html">APPS</a></li> <li><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li> <li><a href="contact.html">CONTACT</a></li> </ul>
</body>
</html>
CSS:
.nav-list { display: inline; width: 90%; text-align:right; height: 100%; padding-left: 50px; }
.nav-list li { display: inline-block; color: blue; background: none; text-decoration: none; padding: 5px; }
John Levy
1,451 PointsThanks for your reply. Sorry I didn't think I needed to add the other links to have the issues solved. This is the full code- HTML- <ul class="nav-list"> <li><a href="contact.html">CONTACT</a></li> <li><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li> <li><a href="apps.html">APPS</a></li> <li><a href="ebooks.html">EBOOKS</a></li> <li><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li> <li><a href="home2.html">HOME</a></li> </ul>
CSS- .nav { background-color: grey; font-size:16px; padding-top: 55px; padding-right: 6px;
}
nav ul { margin: 4px 0px 0px 0px; width: 50%; float: right; }
.nav-list { float:right; display:inline-block; padding:0px 0px 4px 10px;
}
.nav-list a { display:inline-block; color: blue; background: none; text-decoration: none; float:right; padding:5px;} }
nav ul { margin: 4px 0px 0px 4px; width: 58%; float: right; display: block; }
marco vazquez
5,880 PointsI noticed that you made the first list item to be the contact, not sure why but I assume that you want home to be the first one in the list. try making the list items in the order that you want them to appear on your page.
Like this:
<ul class="nav-list"> <li><a href="home2.html">HOME</a></li> <li><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li> <li><a href="ebooks.html">EBOOKS</a></li> <li><a href="apps.html">APPS</a></li> <li><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li> <li><a href="contact.html">CONTACT</a></li> </ul>
John Levy
1,451 PointsHello Yes I did that originally but then the first list item that shows up is the contact page and the home page is the last item rather than the other way round. I got round that but switching the order of the list but now as I mentioned before when the options drop down to the second line the home list item drops down first. What is wrong with my code for this to happen? Thanks
John Levy
1,451 PointsThanks for the help. I managed to get it working correctly.
marco vazquez
5,880 Pointsmarco vazquez
5,880 Pointsare you sure this is all the code you are using? I don't see any any anchor elements withing your list items. You use the css selector ".nav" but I don't see any class named "nav" on your html code. If you see if there is any missing code here and paste it that would be helpful and I can look through it. Hope I can be of help!