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
John Levy
1,451 PointsHow to place a logo on the left side of the nav bar
I am trying to put my logo on the left side of the nav bar for screens 768px and up. So how do I only have my logo show up on screens 768px and up? Right now it shows up on all size screens and it also shows up in the top left hand corner and pushes the rest of the nav bar down which I dont want it to do. I have attached my code here- http://codepen.io/Johned22/pen/vKzAyd Thanks in advance
9 Answers
Carlos Alberto Del Cueto Carrejo
13,817 PointsHi, you need to wrap your image as a list item, this way :
<ul class="nav">
<li><img src="logo.jpg" "id="logo"/> </li>
<li><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li>
<li><a href="indexdesktop.html">EBOOKS</a></li>
<li><a href="apps.html">APPS</a></li>
<li><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
Try to keep experimenting, this was just an order problem, your item was not actually inside the navbar. Good luck
Casey Antoine
Courses Plus Student 5,174 PointsHey John,
To avoid the logo pushing the nav down and creating white space, assuming the relative size of the logo, I'd suggest floating both the img right and ul left, using a seperate div to clear both..
<body>
<div id='nav'>
<img src="logo.jpg" id="logo" />
<nav>
<ul class="nav">
<li><a href="personaltraining.html">PERSONAL & ONLINE TRAINING</a></li>
<li><a href="indexdesktop.html">EBOOKS</a></li>
<li><a href="apps.html">APPS</a></li>
<li><a href="instagram.html">INSTAGRAM SHOUTOUTS</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
</body>
body {
margin:0;
padding: 0;
font-family: 'Roboto', serif;
}
#logo {
float: left;
display: inline-block;
}
.clear {
clear: both;
}
#nav {
background-color: orange; /*turns nav bar white*/
color: white;
width: 100%;
}
.nav {
float: right;
list-style: none; /*gets rid of bullet points*/
text-align: left;
/*padding: 0px -10px 0px -10px; */
margin: 0;
}
.nav > li { /*max-width: 768px*/
display:Inline-block;
padding: 10px 9px 10px 9px; /*nav bar text*/
}
.nav > li a {
text-decoration: none;
color: blue;
font-size: 14px;
padding: 5px 0px 5px 0px
}
.nav > li > a:hover {
color: black;*/
}
Also, if you're wanting to hide the logo for smaller resolutions, I'd recommend messing around with @media and using either display: none; or visibility:hidden;
example:
@media handheld and (max-width:768px),
screen and (max-width: 768px) {
#logo{
visibility: hidden;
}
}
Hope this helps
Casey Antoine
Courses Plus Student 5,174 PointsEdited my previous post with a better solution.. I've gotten a bit rusty and just getting back into coding.. sorry, haha :D
Hope this helps
John Levy
1,451 PointsThanks for your help. I figured out how to place the logo next to the nav bar now but I am still having trouble hiding it on the smaller screens. Is there something wrong with my code? Below is the code I am using to hide the logo. @media only screen and (max-width: 320px) { body { margin:0; padding: 0; font-family: 'Roboto', serif; }
#logo{ display: none; } }
Casey Antoine
Courses Plus Student 5,174 PointsI'd take out the 'only' that you have, should look something like this:
@media screen and (max-width: 320px) {
body {
margin:0; padding: 0; font-family: 'Roboto', serif;
}
#logo{ display: none; }
}
Casey Antoine
Courses Plus Student 5,174 PointsNot sure if what you posted was just a snippet of your code, but are you using any sort of css reset in your code? that'd help with a lot of the margin and padding settings that you're applying by default.
John Levy
1,451 PointsThanks Casey that worked great.
John Levy
1,451 PointsNo I am not using any css reset in my code. Is that something I should look into?
Casey Antoine
Courses Plus Student 5,174 PointsYeah I'd highly recommend using a CSS reset here
Just download, copy and paste it at the top of the css file you have so far, It'll help set all of those attributes to zero for you.
John Levy
1,451 PointsThanks I will check that out. With your help I have figured how to remove the logo from my smaller screens but now the rest of my CSS for each size does not work. I attached the css for screen size ( max-width: 320px) and (max-width: 360px). The nav bar color should be pink for the 320px and orange for the 360px (just to test it works) but it only stays pink when I enlarge the page to 360px. The only thing I changed was adding the #logo { display: none; }} and took out the "only" in the media screen. Where do you think I have gone wrong? http://codepen.io/Johned22/pen/vKzAyd
John Levy
1,451 PointsI just figured it out, I just took one of the } of at the end of the #logo and it worked. Thanks again for your help