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 Henry Lopez
Henry Lopez
7,369 Points

two column navigation to one column

I am trying to make my two column navigation become a one column navigation when I increase the size from a mobile layout to a tablet layout, but I cannot figure out how to eliminate the nav li:nth-child(odd) etc. so that it can become a one column navigation. I have the css below on a main.css file and I am writing my css for tablet and desktop changes on the separate css file (responsive.css).

CSS

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

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

}


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

nav li{
  display: inline-block;
  background-color: #000033;
  margin: 3px 0px;
  padding: 5px 0px;
  border-radius: 5px;
}

nav a {
 font-weight: 800;
  font-size: 1.25em;
  padding: 0px 10%;
}


nav li:nth-child(even) {
  width: 49%;
  float: right; 

}
nav li:nth-child(odd) {
  width: 49%;
  float: left;
}

.navclass:before,
.navclass:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.navclass:after {
    clear: both;
}
.navclass {
    *zoom: 1;
}

      <a href="home.html" id="logo">
          <img src="img/mob-shpe-header.jpg" alt="">
      </a>
      <nav class="navclass">
        <ul>
          <li><a href="home.html" class="selected">Home</a></li>
          <li><a href="about.html">Members</a></li>
          <li><a href="gallery.html" >Gallery</a></li>
          <li><a href="history.html">History</a></li>
        </ul>
      </nav>
    </header>```

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Henry,

"Removing" or "erasing" the css essentially means to set it back to the default value it had.

You'll probably want width: auto; and float: none

You want to set this on all the li's. You can select them all with nav li but this won't have high enough specificity to match the previous nth-child selectors.

So one way could be:

nav li:nth-child(n) {
    width: auto;
    float: none;
}

This will select all the li's the same as nav li would but it has high enough specificity to take effect. Another selector that should work would be .navclass ul li

I don't think you need to worry about your clearfix hack. I don't think it would do anything to an element that doesn't contain any floated children but I've never given this any thought so I could be wrong.

Try the above css first and if you find the clearfix is causing some trouble then we can work on removing that using the same idea of setting things back to their default values.

Henry Lopez
Henry Lopez
7,369 Points

It works! Yeah I to restore to default values is what I ment

Thanks!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I missed that you had display: inline-block on the list items. Are you sure that you need this? You have given your list items a width and have floated them so I don't think this is having any effect. Try taking it out.

If it needs to be in then my answer needs to be modified to set the display property of the list items back to block. They would be block by default so if you can take out the inline-block then you won't have to set them back to block.

nav li:nth-child(n) {
    width: auto;
    float: none;
    display: block;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

Did it really work without having to do anything in my comment? I would have expected the list items to collapse to the width of their content and you would get all of them on one line.

Henry Lopez
Henry Lopez
7,369 Points

I made the width: auto and float none;

before that I had display as inline-block and I deleted it and it stayed the same so I just took it out completely

Michael Nickey
PLUS
Michael Nickey
Courses Plus Student 13,524 Points
Michael Nickey
Michael Nickey
Courses Plus Student 13,524 Points

sounds like you're going to want to do some media queries. The responsive web design classes have a good start on this. You can find more information on this here too. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Henry Lopez
Henry Lopez
7,369 Points

I understand that I need media queries. That is basically what my responsive.css file is for, it contains all my media queries, what I am confused about is how to get rid of this....

nav li:nth-child(even) { width: 49%; float: right;

} nav li:nth-child(odd) { width: 49%; float: left; }

.navclass:before, .navclass:after { content: " "; /* 1 / display: table; / 2 */ } .navclass:after { clear: both; } .navclass { *zoom: 1; }

on my main.css. The above is what is making my two colum layout. by simply putting nav li { display: block;} in my media querie, it does nothing because the above is still added to my page. Is there a way to "erase" the above css in my media querie when I reach tablet size?

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

I agree with Michael, when you do the media query try to use "display: block" it will make your elements appear one on top of the other.