67

Can someone suggest how I can place a logo image on the top of the navbar? My markup:

  <body>
    <a href="index.html"> <img src="images/57x57x300.jpg"></a>
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">

It is not working as the 57x57x300.jpg is shown below the navbar.

NiloCK
  • 571
  • 1
  • 11
  • 33
Gattoo
  • 3,019
  • 7
  • 25
  • 21

5 Answers5

72

You have to also add the "navbar-brand" class to your image a container, also you have to include it inside the .navbar-inner container, like so:

 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
        <a class="navbar-brand" href="index.html"> <img src="images/57x57x300.jpg"></a>
     </div>
   </div>
 </div>
Jason N. Gaylord
  • 7,910
  • 15
  • 56
  • 95
Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • 7
    I'm having trouble with my image causing the navbar to higher than it would have been without the image. The image itself is not higher than the original height of the navbar... Any ideas? – gardenofwine Jun 25 '12 at 19:53
  • @gardenofwine make the image `width:100%` so it can expand as much as it needs to (within the navbars boundaries). – Andres I Perez Jun 25 '12 at 22:56
  • 4
    Shouldn't that be `class="navbar-brand"` as per: http://getbootstrap.com/components/#navbar-default – jnthnclrk Mar 04 '14 at 19:55
  • This won't work if the image is bigger than 20px. As jana4u said recompiling the less is the way to go. – Edward Olamisan Mar 22 '14 at 23:17
  • 2
    @jnthnclrk: This post is from 2012 and therefore refers to http://getbootstrap.com/2.3.2/components.html#navbar – soerface Apr 05 '14 at 17:08
  • 10
    @swege The answer is obsolete then and should not be the accepted answer anymore. The question does not mention a specific version. Anybody that is googling for a solution right now could not care less what used to work a few years ago. We want to know how to implement that with the latest framework. Solutions for older framework version should be just for reference. – Edward Olamisan Apr 22 '14 at 19:29
55

Overwrite the brand class, either in the bootstrap.css or a new CSS file, as below -

.brand
{
  background: url(images/logo.png) no-repeat left center;
  height: 20px;
  width: 100px;
}

and your html should look like -

<div class="container-fluid">
  <a class="brand" href="index.html"></a>
</div>
Simon Cunningham
  • 5,540
  • 1
  • 17
  • 7
13

You should remove navbar-fixed-top class otherwise navbar stays fixed on top of page where you want logo.

If you want to place logo inside navbar:

Navbar height (set in @navbarHeight LESS variable) is 40px by default. Your logo has to fit inside or you have to make navbar higher first.

Then use brand class:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a href="/" class="brand"><img alt="" src="/logo.gif" /></a>
    </div>
  </div>
</div>

If your logo is higher than 20px, you have to fix stylesheets as well.

If you do that in LESS:

.navbar .brand {
  @elementHeight: 32px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
}

@elementHeight should be set to your image height.

Padding calculation is taken from Twitter Bootstrap LESS - https://github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52

Alternatively you can calculate padding values yourself and use pure CSS.

This works for Twitter Bootstrap versions 2.0.x, should work in 2.1 as well, but padding calculation was changed a bit: https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50

Jhonny D. Cano -Leftware-
  • 17,663
  • 14
  • 81
  • 103
jana4u
  • 161
  • 1
  • 7
4

i use this code for navbar on bootstrap 3.2.0, the image should be at most 50px high, or else it will bleed the standard bs navbar.

Notice that i purposely do not use the class='navbar-brand' as that introduces padding on the image

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="" href="/"><img src='img/anyWidthx50.png'/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
       <ul class="nav navbar-nav">
        <li class="active"><a href="#">Active Link</a></li>
        <li><a href="#">More Links</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</div>
Greg
  • 652
  • 6
  • 7
  • Thanks, I like this solution because it removes all redundant container and such
    . I want to add that the image can be larger than 50px, but if you want to use such a larger image you should specify it in your css - something like: `#nav_brand_profile_pic { height: 40px; padding-top: 5px; } `
     – Tobias Beuving Jan 27 '15 at 11:59
3

If you do not increase the height of navbar..

 .navbar .brand {
 position: fixed;    
 overflow: visible;
 padding-left: 0;    
 padding-top: 0;
 }

see http://jsfiddle.net/petrfox/S84wP/

Fox
  • 397
  • 3
  • 3