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
Cristy Balch
780 PointsMy navigation isn't lining up correctly. "Contact" is appearing underneath "About."
This is the code I did on my responsive.css page: nav {
background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
5 Answers
Katelyn Morris
3,443 PointsAwesome! I added the code above to into a codepen and it looks like your width: 45% is throwing off your menu when you start shrinking it down. The menu items will still stack on top of each other on mobile, but if you change your width to 100% it will only start stacking on mobile sizes.
Silas Lane
6,537 PointsHey Cristy! I was having the same issue until I changed the navigation width to 50% and the logo width to 40%. Hope this helps!
Saman Rashidi
11,007 PointsHi guys, I had the same problem and went to main.css and changed the nav a { font-weight: 800; padding: 15px 10px; <---------------------------- }
to
nav a { font-weight: 800; padding: 15% 10%; <---------------------------- }
I had used px instead of % for padding. anyway it solved my problem.
cheers
Katelyn Morris
3,443 PointsCould you post your html as well? I think maybe the problem is that your container for the nav is to small to fit all of the individual menu items.
Cristy Balch
780 PointsThis is the html: ''' <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> ''' This is the css on my main.css: ''' 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: 800; padding: 15px 10px; }
'''
Michal Janek
Front End Web Development Techdegree Graduate 30,654 PointsI managed to fix this by changing the width % ratio between the header {35%} and logo {55%}
Cristy Balch
780 PointsCristy Balch
780 PointsThank you Katelyn!
Steef Vendy
9,436 PointsSteef Vendy
9,436 PointsHi Katelyn, I am having the same problem with my nav, I changed the width to 100% as suggested but then my header nav become higher which not what i want. any solution to keep my nav the same height but the menu items do not stack?
Michal Janek
Front End Web Development Techdegree Graduate 30,654 PointsMichal Janek
Front End Web Development Techdegree Graduate 30,654 Pointsyes but then again Nick will continue to use 45% for the header / .logo so it wont fit on the same line.