Menu
Is there any way to put an image (brand logo) on bootstrap's navbar like:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><img src="../Content/Images/logo.png" /></a>
</div>
</div>
</div>
and keep the navbar height untouched? I tried
.navbar .brand
{
display: block;
height: 125px;
width: 246px;
padding: 0;
background: url('../Content/Images/logo.png') no-repeat left center;
float:left;
position: absolute;
}
and i have good results with the positioning but the links come over the logo.
888
If you're simply trying to adjust the size of an image to correspond to the height of a default navbar ( min-height: 50px ), simply use the below CSS as a base depending on how you want the image to fit. In this example, the image will cover it's part of the navbar completely. See working Snippet.
In the header, there's no set size. Some like larger, but I suggest you add it within a div. Restrict the div's size and add the vector, then simply resize the div to fit your liking. Use a link block for vector you add.
Open your image in Preview - Go to Tools/AdjustSize: Then you can change your width or height to the desired size. Make sure to keep Scale Proportionally checked!
the links come over the logo
This is caused by the absolute positioning.
Update Without resizing the image :
.navbar .brand {
max-height: 40px;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
Demo without resizing image (jsfiddle)
189
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
