I would like to try out the logo similar to adobe hanging from the navabar. but I couldn't do it using bootstrap.
Any thoughts?
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>
Check this DEMO
try this css:
Try position absolute.
Give position relative to the parent div and give position absolute to child 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With