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 trialHenry Lopez
7,369 Pointstwo 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
Courses Plus Student 94,610 PointsHi 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.
Michael Nickey
Courses Plus Student 13,524 Pointssounds 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
7,369 PointsI 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
10,288 PointsI 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.
Henry Lopez
7,369 PointsHenry Lopez
7,369 PointsIt works! Yeah I to restore to default values is what I ment
Thanks!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsI 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.Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou'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
7,369 PointsHenry Lopez
7,369 PointsI 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