Put a logo on twitter bootstrap navbar without resizing the navbar

Put a logo on twitter bootstrap navbar without resizing the navbar

Is there any way to put an image (brand logo) on bootstrap’s navbar like:

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.

Solutions/Answers:

Solution 1:

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)

References

Related:  Bootstrap 3 glyphicons in add ons