Twitter-Bootstrap-2 logo image on top of navbar

Question

Can someone suggest how I can place a logo image on the top of the navbar  My markup      lt body gt       lt a href  index html  gt   lt img src  images 57x57x300 jpg  gt  lt  a gt        lt div class  navbar navbar-fixed-top  gt          lt div class  navbar-inner  gt            lt div class  container  gt    It is not working as the 57x57x300 jpg is shown below the navbar

User · Answer

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>

User · Answer

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

User · Answer

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    lt div class  navbar navbar-fixed-top  gt     lt div class  navbar-inner  gt       lt div class  container  gt         lt a href     class  brand  gt  lt img alt    src   logo gif    gt  lt  a gt       lt  div gt     lt  div gt   lt  div gt    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

User · Answer

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 -   lt div class  container-fluid  gt     lt a class  brand  href  index html  gt  lt  a gt   lt  div gt

User · Answer

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     lt div class  navbar navbar-fixed-top  gt      lt div class  navbar-inner  gt        lt div class  container  gt           lt a class  navbar-brand  href  index html  gt   lt img src  images 57x57x300 jpg  gt  lt  a gt        lt  div gt      lt  div gt    lt  div gt

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

Examples related to twitter-bootstrap

Examples related to navbar

Examples related to twitter-bootstrap-2