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 Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points

How do I get my navigation to be at the bottom right of my header section? Please help!

So I accidentally moved my navigation from being at the bottom right to the upper right of my header section.

I've tried to undo several times to no avail.

My website (in progress) is available here :

http://port-80-bz2gnxtxrh.treehouse-app.com/

If you view it, you'd see the problem. I want the navigation to go back to being at the bottom right region.

Thanks!

2 Answers

Tim Knight
Tim Knight
28,888 Points

You could just add some padding to the top of the nav area. Your lower viewport widths push the nav down because the logo are in centered and it pushes it down. You don't get that on larger screens because the logo is floated to the left.

@media screen and (min-width:660px){
/**********************************
 HEADER
**********************************/
  nav{
    background:none;
    float:right;
    font-size:1.125em;
    margin-right:5%;
    margin-top: 100px;
    text-align:right;
    width:45%;
}
Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points

Thanks, that worked! Not entirely sure what you mean by your 2nd sentence. Can you rephrase? #BeginnerBlues. Thanks

Tim Knight
Tim Knight
28,888 Points

In the second sentence I'm referring to the fact that you're using a media query here for the positioning of your navigation. I was referring to the fact that on a smaller screen (in this case under 660px) it is immediately on the bottom right of the header because your logo pushes it there. You can see what I mean but sizing down the browser window.

Tobi Ogunnaike
Tobi Ogunnaike
2,242 Points

Oh, I see. Thanks.

Somewhere around 660px, my navigation breaks open and the 'Contact' link goes onto another line.

Any idea how I can make my navigation display in the same line regardless of the screen size? Thanks!

Tim Knight
Tim Knight
28,888 Points

It's because your width is 45% and that's not wide enough to hold all of the content. I'd increase that width if possible or adjust the font size.

Cesar Vanbuskirk
Cesar Vanbuskirk
6,672 Points
Cesar Vanbuskirk
Cesar Vanbuskirk
6,672 Points

I think you fixed this issue already but the easy way would have been to make your navigation links absolute and its parent element relative then just move the links bottom: 0, right: 0