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 hum4n01d
hum4n01d
25,493 Points

Can't get my navigation links to display properly

Here is my code: http://codepen.io/anon/pen/LENaww

I can't get the nav links to display as inline block when the browser width is greater than 1050px. They just stack up.

Also, when the browser width is smaller than 1050px but bigger than 650px, the links won't center.

EDIT: New pen: http://codepen.io/anon/pen/LENaww

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points

Try this:

            <nav>
                <div>

                    <ul>
                        <li><a style="text-decoration: underline" href="index.html">Home</a></li>
                        <li><a href="architecture.html">Architecture</a></li>
                        <li><a href="strengths.html">Strengths</a></li>
                        <li><a href="weaknesses.html">Weaknesses</a></li>
                    </ul>
                  <h1>Ancient Rome</h1>
                </div>
            </nav>

    h1 {
        font-size: 40px;
    }
    nav li {
        float: right;
        margin-top: 1em;
      margin left: 50px;
        padding: 0 10px;
        display: inline;
    }
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey,

To get the nav to display, you need to change margin-top: -2em; to margin-top: -1.2em; thats not really the solution though its just a fix.
I had a quick look at the code.
Better to have @media queries at the end of your code.
Your trying to push your nav into the h1 element, thats why your getting the problem.
Your media queries need some adjustment, you have sizes overlapping if one is min-width: 1050px the smaller one should be max-width: 1049px also you need a min and max width on your medium media query, a min-width to start at 651px so it comes in after your mobile size of 650px.
better to use @media screen and than @media all and

First id say rearrange the positioning of your h1 and nav to get you started.

Hope this helps.

hum4n01d
hum4n01d
25,493 Points

Ok, I changed "all" to "screen", but it didn't make a difference. Also, does the order of the CSS matter?

hum4n01d
hum4n01d
25,493 Points

Oh, also the new pen is here: http://codepen.io/anon/pen/LENaww

Do you have any idea why it collapses when it is moved up more than 1.2em?

Wayne Priestley
Wayne Priestley
19,579 Points

Yes the order matters a lot.
Just changing to screen won't solve the problem, to get a proper fix the layout needs to change.
With the h1 where it is there is not enough room for the nav to be on the same line with -2em thats why it stacks.

hum4n01d
hum4n01d
25,493 Points

Then how are you supposed to order it?