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

HTML

Posted by Gabriel E
Gabriel E
8,916 Points

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
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/

Gabriel E
Gabriel E
8,916 Points

Great! Thank you!

Gabriel E
Gabriel E
8,916 Points

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
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

Gabriel E
Gabriel E
8,916 Points

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
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.

jack mahony
jack mahony
3,357 Points
jack mahony
jack mahony
3,357 Points

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