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

CSS

Posted by John Levy
John Levy
1,451 Points

Issues with the nav bar tabs

What is the best way to set up the navigation bar? Right now when I reduce the screen size it cuts of the last tab (contact) in the nav bar. I have moved it to the left slightly so it shows up on the page without scrolling but if I were to do this I would have to do a media query every 50px or so. Is this the way it should be done or is there a simpler and more effective way? I have removed the horizontal scrollbar which for some screen sizes scrolling is the only way for the user to see the contact tab. I have attached my code below. http://codepen.io/Johned22/pen/mAAVXB Thanks in advance

4 Answers

Andreas Frost Nordstrøm-Hansen
Andreas Frost Nordstrøm-Hansen
2,443 Points
Andreas Frost Nordstrøm-Hansen
Andreas Frost Nordstrøm-Hansen
2,443 Points

Hi John.

Try and use % and EM, instead of PX when making your CSS. It will be more responsive to mobiles and screens of other sizes.

Try and replace your values with EM and % instead.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your reply. Even if I use % or em when I reduce the size of the screen part of the text in the nav bar will still be cut of though. How do I prevent this? Kind regards John

Andreas Frost Nordstrøm-Hansen
Andreas Frost Nordstrøm-Hansen
2,443 Points
Andreas Frost Nordstrøm-Hansen
Andreas Frost Nordstrøm-Hansen
2,443 Points

Hi John.

Im not yet that advanced to remember how to fix that.

but my best guess would be to, make a navbar dropdown like this

http://www.w3schools.com/howto/howto_js_topnav.asp

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

I was looking for something like this website-https://www.peerspace.com/ Looking at this nav bar on this site when I reduce the size of the page none of the text in the nav bar goes off the page. Is this die to having many media queries or is it done in another way? Thanks