bootstrap navbar, настроить бренд на изображение, висящее

Question

Я хотел бы попробовать логотип, похожий на adobe, висящий на navabar. но я не мог сделать это с помощью бутстрапа.

Любые мысли?

http://jsfiddle.net/EFTTp/1/

HTML:

<div class="navbar navbar-static-top"> 
    <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
<a class="brand" href="index.html"> <img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg"></a> 

     <div class="nav-collapse collapse"> 
      <ul class="nav pull-left"> 
       <li class="active"><a href="index.html" class="scroller">Home</a> 

       </li> 
       <li><a href="pricing.html" class="scroller">Pricing</a> 

       </li> 
       <li><a href="knowledge.html" class="scroller">FAQ</a> 

       </li> 
      </ul> 
     </div> 

Answer 1

Проверить это DEMO

попробовать этот CSS:
Try позиция абсолютна.
Дайте позицию относительно родительского div и дайте позицию абсолютной для дочернего div.

.navbar-inner{ 
    position:relative; 
    padding-left:70px; 
} 
.navbar .brand {     
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 50px; 
    background: #f00;   
    margin-left: 0px; 
    padding: 10px; 
}