22

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:

small image but no distortion

But if I change the size of the image to 30x30 this is what happens, how do I prevent the distortion of the navbar:

large image but a distorted 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.

Martijn Thomas
  • 861
  • 3
  • 13
  • 24
  • I see that you use custom icons. You can check your css for that icon and make sure that it is correct for all sizes? – Serge Kuharev Jun 02 '14 at 10:12
  • In this case it is not an icon, it is an image (currently a placeholder) but later on it will be the users profile image. So I don't see how your suggestion might help (sorry). – Martijn Thomas Jun 02 '14 at 10:14
  • I looked in wrong place. But why don't you want to use CSS icons then? It will make sure you have right size of icon on all screen sizes. – Serge Kuharev Jun 02 '14 at 10:15
  • @Megakuh I am using css icons (font awesome), but in this instance at this spot in the layout I want to show the users profile image/avatar, so I can't use CSS icons to display the actual profile image of a user as far as I know. – Martijn Thomas Jun 02 '14 at 10:18
  • Can you explain how it distorts your navbar? Perhaps provide some visual guides how you want it to look exactly? That'd be great. I guess you want some extra padding between the image and the rest of the elements? – Hristo Georgiev Jun 02 '14 at 10:20
  • I created a [JSFiddle](http://jsfiddle.net/bJcrk/) of the problem. Yes I guess its a padding problem. – Martijn Thomas Jun 02 '14 at 10:26

3 Answers3

16

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

Kooki3
  • 599
  • 4
  • 12
  • I moved the profile-image class to the anchor, and set the padding to 0, but that did not have any effect :( – Martijn Thomas Jun 02 '14 at 10:16
  • do you have any pages that i can use to check? can't imagine/reproduce the issue just by looking the image. thank you – Kooki3 Jun 02 '14 at 10:19
  • I upvoted your answer but accepted @jme11's. Simple reason, that solutions to me seems more elegant. But still your solution worked :) – Martijn Thomas Jun 02 '14 at 10:55
13

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;
}
jme11
  • 17,134
  • 2
  • 38
  • 48
-7
//write you  script
$(document).ready(function(){
    $(".dropdown").mouseover(function(){
        $(".dropdown-menu").show();
    })
    $(".dropdown").mouseout(function(){
        $(".dropdown-menu").hide();
    });
});
Kisspa
  • 584
  • 4
  • 11