Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Trouble adjusting header navigation -- Any ideas?

Basically, I'm trying to get my navigation in sort of a block form. I have 8 anchor elements and if I just leave them how they are, you can see by the code that they kind of form a pyramid. But what I want them to do is to be in perfect line with eachother, and then when there's no more space on the first line, the next 2 or 3 elements float down to the next line in perfect form, until there's none left. Now this is only for my mobile design, so I won't need any responsive code for it at the moment.

Thanks, and here's the code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bulletproof Editing - Legal Proofreading, Court Reporter Proofreading</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Copse' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
              <h1>BulletProof Editing Services</h1>
            </a>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="difference.html">The Difference</a></li>    
                    <li><a href="guarantees.html">Two Guarantees</a></li>
                    <li><a href="samples.html">Samples</a></li>
                    <li><a href="testimonials.html">Testimonials</a></li>
                    <li><a href="rates.html">Rates</a></li>
                    <li><a href="owner.html">About the Owner</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div id="wrapper">
            <section id="home">
                <h2>Legal proofreading -- </h2>
            </section>
            <section id="homebutton">
                <button>The Difference</button>
                <button>Two Guarantees</button>
                <button>Samples</button>
            </section>    
        <footer>
            <p>Email: example@something.com</p>
            <p>&copy; 2016 BulletProof Editing Services LLC.</p>
        </footer>
      </div>
   </body>
</html>
/***********
GENERAL
***********/

body {
    font-family: "Merriweather", sans-serif;
}

h1 {
    text-align: center;
}

h2 {
    float: left;
    padding-left: 30px;
}

a {
    text-decoration: none;
}

#home {
    text-align: center; 
}

button {
    display: block;
}

/************
HEADING
************/

h1 {
    font-family: "Merriweather", sans-serif;
}

/**************
NAVIGATION
**************/

nav {
    text-align: center;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
    display: inline-block;
}

nav a {
    padding: 15px 10px;
    font-family: "Copse", sans-serif;
}

/************
FOOTER
************/

footer {
    font-size: 0.85em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #808080; /* A very light gray */
}

/**********
COLORS
**********/

body {
    background-color: darkgray; /* for temp. use, later change to specific background image */
    color: #fff;    
}

h1 {
    color: #fff;
}

4 Answers

Erik Nuber
Erik Nuber
20,629 Points

You are going to likely want to use flex for this and set the flex-wrap property to wrap so that it will go to the next line as needed.

Here is an excellent guide for all things flex. Shows pictures and easy to understand.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Great! Thank you!

Eric, The css tricks was very helpful and I totally understand it. Now, is there any was that I would know which one to use? I found that the "flex-wrap: wrap;" seems to be what I'm looking for, but I've implemented it in my "nav li" section, but it just doesn't seem to do the job. If you don't know right off the bat, its totally fine, I'll just tinker around with it some more. The only thing that works is display inline-block, but that only displays a maximum of 3 on the top row, and then if I add a 4th element, it kind of does its own thing.

Erik Nuber
Erik Nuber
20,629 Points

Here's what you need. You can get rid of styling the nav and nav a unless you have a reason to do so. nav li is already targeting the <a> tags as well. And you want to add flex to the container of the items which is actually the nav ul.

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: row;
  list-style: none;
  padding: 0;
}

nav li {
  margin: 0 5px;    //Note I moved the margin and padding to here from the nav a 
    padding: 5px 10px; 
  font-family: "Copse", sans-serif;
}

http://codepen.io/enuber/pen/JKBNNr

Ah got it! I didn't realize you could put so much of the same type of alignment code in one css class. Thanks a lot!

Erik Nuber
Erik Nuber
20,629 Points

Are you working in workspaces? Can you take a snapshot. I will fix it and show you how I did it. Or, I can just try using codepen.

Wow! very helpful link Erik. I was running into the same problem, cheers!