How does one replace brand text with an image on twitter bootstrap nav bar?

Question

I've tried to replace the brand text with an image as you can see in my example index page. But, this causes the nav to break into two lines with the logo image on its own line. How can i fix this? Here is the the page that shows the problem:

http://www.clearsoftinc.com/Clearsoft/public_html/index.html

And here is the page that shows what it was supposed to look like (before i changed text logo to graphic logo).

http://www.clearsoftinc.com/Clearsoft/public_html/about.html

Answer 1

This I believe is causing the problem.

<img src="img/new_logo_white.png" width="15%" alt="Clearsoft Home">

The width attribute is causing it to expand more than it should. Remove it and use css width and you should be good to go.

.logo{
  width: 95px;
  margin-top: 15px;
}

Answer 2

Working example:

http://jsfiddle.net/N2nGQ/

I simply used this:

<a class="navbar-brand" href="#"><img src="http://www.clearsoftinc.com/Clearsoft/public_html/img/new_logo_white.png" style="width: 50px; height: 20px;" /></a>

To get this working on your site too, you must add the 'navbar-brand' to the a tag.

Answer 3

Don't use width="%15" on your image. Instead, resize the image to the size you want it and use the smaller image (in your case it would be 112 x 25). The wrapping <div class="navbar-header"> is making room for a 744px wide image, but then on your <img> tag you are scaling it down to 15% of it's original size.

See this screenshot: http://imgur.com/f2xkO1f

Plus, its just a bad idea because the site still has to request and download the large file then resize it. It would make your site faster if you just make a smaller image yourself and reference that one with the smaller size.