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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Luke Bennett
Luke Bennett
10,265 Points

Nav bar wrap around problem.

I have added 4 pages to the nav bar rather than 3 and my contact is wrapping underneath my other 3 page links as I resize the page.

How do I fix this? https://cl.ly/022P0g1V0w0s

Stephen Urena
Stephen Urena
705 Points
Stephen Urena
Stephen Urena
705 Points

Good morning, can you paste a copy of your code for the nav?

Luke Bennett
Luke Bennett
10,265 Points 
 <nav>
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="about.html">About</a></li>
          <!------------ PRODUCTS -------------------------------------
          <li><a href="products.html">Products</a></li>
          ------------------------------------------------------------->
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>

index.html

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

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

nav li {
  display: inline-block;
}

nav a {
  font-weight: 700;
  padding: 15px 10px;
}

main.css

@media screen and (min-width: 660px) {

  /*******************************************
  HEADER
  ********************************************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #a6a6a6;
    margin-bottom: 60px;
  }

responsive.css

Luke Bennett
Luke Bennett
10,265 Points

Thank you!

3 Answers

Stephen Urena
Stephen Urena
705 Points
Stephen Urena
Stephen Urena
705 Points

I would you consider using twitter bootstrap for your site, as it helps structure your site to be responsive, and sets the baseline across different browsers. (http://getbootstrap.com/)

if not, then on the responsive, you can try try...

nav {
height: auto;
}

nav ul {
width: 100%; 
display: block;
height: auto;
}

nav li {
// if you are trying to keep them inline, or if you want elements stacked you can use 50%
width: 100%;
display:inline-block;
}
nav a {
text-align: //to your preference;
width: 100%;

(open up the console, right-click on mouse, Inspect, to fiddle around with the style for the different responsive dimensions)

Michael Collins
Michael Collins
3,447 Points
Michael Collins
Michael Collins
3,447 Points

Basically your nav at 660px and above has a width of 45% of its container, which means there is not enough room for the list items to sit side by side.

You will have to increase the size of your nav to allow room for them to fit.

When doing this, you will also have to reduce the size of #logo down from 45% so that your nav and the logo sit on one line.

Darrin Fagley
Darrin Fagley
12,432 Points

I was having the same problem and this worked beautifully.

Luke Bennett
Luke Bennett
10,265 Points
Luke Bennett
Luke Bennett
10,265 Points

Thank you! Got it!

Luke Bennett
Luke Bennett
10,265 Points

I will give bootstrap a go as well!