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

CSS

How 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

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

Hey 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

Edited 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

Thanks 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; } }

I'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; } 
}

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

Thanks Casey that worked great.

No I am not using any css reset in my code. Is that something I should look into?

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

Thanks 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

I 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