[twitter-bootstrap] Twitter-Bootstrap-2 logo image on top of navbar

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.

This question is related to twitter-bootstrap navbar twitter-bootstrap-2

The answer is


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/


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


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>

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>

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation Bootstrap 4 align navbar items to the right Align nav-items to right side in bootstrap-4 Center an element in Bootstrap 4 Navbar How can I reuse a navigation bar on multiple pages? How to change link color (Bootstrap) Bootstrap full responsive navbar with logo or brand name text Bootstrap 3 - disable navbar collapse Changing the space between each item in Bootstrap navbar Change bootstrap navbar collapse breakpoint without using LESS Bootstrap NavBar with left, center or right aligned items

Examples related to twitter-bootstrap-2

TypeError: $(...).modal is not a function with bootstrap Modal GLYPHICONS - bootstrap icon font hex value Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2 Padding In bootstrap How can I get my Twitter Bootstrap buttons to right align? Add vertical whitespace using Twitter Bootstrap? Change width of select tag in Twitter Bootstrap vertical-align: middle with Bootstrap 2 How can I change the default width of a Twitter Bootstrap modal box? Twitter-Bootstrap-2 logo image on top of navbar