How do I get the profile image (see picture) to be say 25/30px without distorting the navbar?
This is what I have now:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/18x18" class="profile-image img-circle"> Username <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
</ul>
</li>
this is the result:
But if I change the size of the image to 30x30 this is what happens, how do I prevent the distortion of the navbar:
I tried clearing the margin and paddings on the image but that had no effect.
Update: Here is a JSFiddle of the current code.
after looking at the JSFiddle, I found out the problem is caused by the height of the image you use instead of the padding.
give the image a class, and make it float left, then use position:relative to tweak the position.
<li class="dropdown">
<a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
<img src="http://placehold.it/30x30" class="img-circle special-img"> Test <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
</ul>
</li>
-
.special-img
{
position: relative;
top: -5px;
float: left;
left: -5px;
}
My Fiddle here
You got it mostly right following what Kooki3 said, there's just more specificity in the Bootstrap stylesheet, so just change your .profile-image
to .navbar-nav>li>a.profile-image
Editing your fiddle like this, the nav looks perfect to me:
.navbar-nav>li>a.profile-image {
padding-top: 10px;
padding-bottom: 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