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

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 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

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

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   lt div class  navbar navbar-default navbar-fixed-top  role  navigation  gt       lt div class  container  gt       lt  -- Brand and toggle get grouped for better mobile display -- gt       lt div class  navbar-header  gt         lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-ex1-collapse  gt           lt span class  sr-only  gt Toggle navigation lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt         lt  button gt         lt a class    href     gt  lt img src  img anyWidthx50 png   gt  lt  a gt       lt  div gt        lt  -- Collect the nav links  forms  and other content for toggling -- gt       lt div class  collapse navbar-collapse navbar-ex1-collapse  gt          lt ul class  nav navbar-nav  gt           lt li class  active  gt  lt a href     gt Active Link lt  a gt  lt  li gt           lt li gt  lt a href     gt More Links lt  a gt  lt  li gt         lt  ul gt       lt  div gt  lt  --   navbar-collapse -- gt     lt  div gt   lt  div gt

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

[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