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

Posted by Chris Feltus
Chris Feltus
3,970 Points

Adding Image to Nav Item

I am attempting to build out my own site using what I have learned on some of the tutorials here. This is the live site where you can view the source code http://cssdojo.net/

What I am trying to do is replace the "home" navigation item with a logo that is clickable, centered and doesn't interfere with the other menu items .

My goal is more clearly illustrated by this mock up here http://s21.postimg.org/w0v0vo11z/mockup2.jpg

As you can see the "Home" navigation item has been replaced with a logo from the game sonic the hedgehog.

I have tried a few attempts at it such as: 

header nav ul li#logo a {
    display: block;
    width: 276px;
    height: 172px;
    background: url('images/sonic-logo.png') center center no-repeat;
    text-indent: -9999px;
}

Any help achieving this effect would be greatly appreciated. I gave this specific navigation list item anchor the ID of logo. The path to the logo image is on the site images/sonic-logo.png

I am not worrying about media queries & responsive design for this project.

But no luck so far. Apologies for looking through my messy markup in advance - hey im new!

Many, thanks in advance

5 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points

Here is how I accomplished what you wanted. I kept the #ribbon the same width as everything else as it looked more organized to me.

I wasn't sure if you wanted to have your page saved in a Codepen so I didn't make one. Although copy and paste the below into the appropriate places, or at the end of your current CSS and it should look good.

/* Since you're not worried about responsiveness
   set a finite width and removed max-width
*/
.container,
#ribbon {
  width: 1050px;
}

#ribbon {
  margin: 0 auto;
}
nav ul {
  padding: 0;
  margin-left: -2px;
}
nav ul li {
  /* font-size: 20px; // Reduced font slightly so full nav would be displayed nicely */ 
  /* line-height: 95px; // Do not use pixels for line-height */
  font-size: 18px;
  line-height: 2.3;
}
nav ul li#logo {
  /* Removed image from here and 
     placed into the child link (see below)
  background: url("images/sonic-logo.png") no-repeat scroll center center transparent;
*/
  width: 276px;
  height: 172px;
}
nav ul li#logo a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  top: -40px;
  background: url("images/sonic-logo.png") no-repeat scroll center center transparent;
  text-indent: -9999px;
}
.container .group h1 {
  margin-top: 40px; /* Push header tag down a bit so logo isn't covering it */
}
.column-content {
  overflow-x: auto; /* Enable scroll bars for lengthy content */
}
footer {
  text-align: center;
}
Devin Scheu
Devin Scheu
66,191 Points
Devin Scheu
Devin Scheu
66,191 Points

You should put the image in with HTML, then set the href of the image to the place you want to go when the image is clicked. You will have to figure out how to get the image up in your nave since I do not have the full code to your website.

Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

I agree with Devin on this. While my code works to get the image shown via css and background, as soon as you remove the'home' text from the a tag, the area collapses on itself, and you won't see the image anymore. When you are using an image to replace text, then it's part of the content, and should be part of your html with an img tag.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Chris,

I also agree with putting the image into your html, I think thats a much better option.

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

First, if you want the image to be clickable, it's gonna need to be part of your <a> tag. So, I would put your logo id on the tag instead of the list item. I put together some code of the nav on Codepen that shows the image being pulled in. It's not perfect, so you'll have to fiddle with it. But hopefully it can help.

Chris Feltus
Chris Feltus
3,970 Points
Chris Feltus
Chris Feltus
3,970 Points

Thanks everyone for your replies.

Sean T. Unwin Thank you so much for taking the time out of your day to help correct my code. I also appreciate the pointers such as using a relative measurement for line height. As far as best practices for future projects should I include the navigation logo within the HTML? I am getting conflicting opinions on which way to go about it from a few different tutorials, here on treehouse & google searches.

Sean T. Unwin
Sean T. Unwin
28,690 Points

If you feel the image is relevant to SEO then use an img tag, otherwise I don't think it matters as long as it works. :)

If you feel the image is or can be relevant to SEO then name the image accordlingly, like have the domain name (minus the .com or whatever the top level is), such as mysite_logo.png, for example.