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

How to move the text in the nav bar

How do I move the text in the nav bar to the left? Right now I have it on the right and want to keep it on the right hand side but a little more inwards. How do I bring the text in a little to the left? I have attached my code below. http://codepen.io/Johned22/pen/mAAVXB Thanks in advance

Vladimir Ulyanov
Vladimir Ulyanov
14,023 Points

I'm also still learning CSS at the moment, so take this with a pinch of salt!

It looks like you should be able to just amend your padding within the nav for the right hand side only. If you increase the px for the right hand side this should nudge the text to the left a bit.

For example you change

.nav > li {                                                             
    display:Inline-block;
    padding: 30px 20px 5px 7px;                                  
}

to this instead, to move it 10px to the left:

.nav > li {                                                             
    display:Inline-block;
    padding: 30px 30px 5px 7px;                                  
}

The pros can correct me if I'm talking rubbish! :P

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

Problem with that is, that it corresponds to all the links in the navbar. So now there is gonna be more padding between each link.

Not necessarily a bad thing, but might not be eaxtly what is intended though.

2 Answers

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

Not exactly sure this is the most correct way. But it works.

I took and added this to your code.

So i added a bit of margin on the right side of the last link, to push it all a bit in.

To do that i added an id to the last contact link.

you can change the percentage however you like.

HTML part

<li id="test"><a href="contact.html">CONTACT</a></li>

CSS part

#test {

  margin-right: 15%;
}
Robbie Thomas
Robbie Thomas
31,093 Points

In the nav section:

padding: 60px 50px 0px 0px;

The second number is the right padding, 50px perhaps is too much, so try 20 or 30px

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

Thanks for your help. That solved my problem