Twitter-Bootstrap-2 logo image on top of navbar

Asked 27/3, 2012 at 16:29 Answered 24/9, 2014 at 18:59

Solved twitter-bootstrap navbar twitter-bootstrap-2

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.

Ulrick answered 27/3, 2012 at 16:29 Comment(0)

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>

Kimmy answered 27/3, 2012 at 16:50 Comment(6)

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? – Smalt 25/6, 2012 at 19:53

@Smalt make the image width:100% so it can expand as much as it needs to (within the navbars boundaries). – Kimmy 25/6, 2012 at 22:56

Shouldn't that be class="navbar-brand" as per: getbootstrap.com/components/#navbar-default – Removable 4/3, 2014 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. – Swihart 22/3, 2014 at 23:17

@jnthnclrk: This post is from 2012 and therefore refers to getbootstrap.com/2.3.2/components.html#navbar – Nickelsen 5/4, 2014 at 17:8

@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. – Swihart 22/4, 2014 at 19:29

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>

Chancellery answered 29/3, 2012 at 8:50 Comment(2)

you need "'" in the url – Dignify 16/9, 2014 at 8:57

@NoIdeaForName No you don't – Hornstein 1/11, 2014 at 1:54

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

Plainspoken answered 10/9, 2012 at 22:4 Comment(0)

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>

Jurisdiction answered 24/9, 2014 at 18:59 Comment(1)

Thanks, I like this solution because it removes all redundant container and such <div's>. 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; } – Kilar 27/1, 2015 at 11:59

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/

Ayana answered 28/5, 2013 at 7:30 Comment(0)

Recommended topics

Hot tags