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 PointsHaving issues with the text in the nav bar when I reduce the screen size
I have two questions regarding my nav bar. The first is I wanted to move the nav bar text over more to the right so I did margin-right: -60px; on the the last page in my nav bar (the contact page). The problem will this is it caused the element to move to the right but none of the other five pages moved to the right. How do I get them all to move up to the right rather than just the contact page? My second question is when I reduce the size of the page the first page in the nav bar (the home page) eventually falls under the logo on the left hand side. How do I make it fall onto a second line on the right hand side when the screen size gets smaller? I have attached my code below. http://codepen.io/Johned22/pen/mAAVXB Thanks in advance
3 Answers
John Levy
1,451 PointsThanks for your help. Is there a way for the elements in the nav bar to only span say 50% of the page? I want the text of all the pages to be on one line but as the page gets smaller I want it to be on two lines on the right side of the page so it does not interfer with the logo on the left side. What should I change in my code so I can control how far the text will go before it moves onto the second line? Thanks
tylerpostuma2
5,175 PointsHey! Sorry about the late response, I was asleep, and had school! As far as making it so that you can have the span of text only take up 50% of the page, one of the best ways is to use media queries. Basically, media queries allow you to be able to change how something looks, at a certain screen size, or at a certain screen width. So if you wanted the nav links to not interfere with the logo at all, you would need to do something like this:
@media only screen and (max-width: 600px) { Whatever code you want in here to make it look nice :D }
What this is saying, is that when the width of the screen is 600px, do whatever is in the code box, and override anything else that's above. I hope I helped, but if you need anymore help, feel free to comment back on this post, i'll be watching just incase!
Happy coding!
Kevin Barnes
18,352 PointsHey John,
It might be easier if you structure the code a little different, maybe try something like this:
<nav>
<div class="logo">
<!-- Insert Logo -->
</div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
I would then use the main nav element in the CSS for the background colour and sizing, then float .logo & ul left and right and set a width of 50% for ul, it should then grow no bigger than 50% of the screen. An alternative would be to use flexbox
John Levy
1,451 PointsThanks for your help, I will look into that.
tylerpostuma2
5,175 Pointstylerpostuma2
5,175 PointsHi!
Your code looks pretty good right now, however, if you want to move the text as a whole over, you would have to target the ul. This is because all of the list elements, and the links are INSIDE of the ul. As far as moving it over, you would need to use: margin-right: 60px; In this case, you wouldn't need to use a negative number because you are applying the margin to the right side of the ul.
As far as moving the first page in the nav bar, the links aren't moving under the logo for me, however, it is entirely possible that you are having this issue, and i'm not! Sorry I couldn't help you out with that one! If you would like to comment back with some more details about it, I would love to help!
Hope this helped!