0

If I use an image along side a link, the navbar is getting bigger. 

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                <img src="..." /> // this is causing the problem 
             Me<span class="caret"></span>
                  </a>
        <ul class="dropdown-menu" role="menu">
            <li><a>Sample 1</a>
            </li>
            <li class="divider"></li>
            <li><a>Sample 1</a>
            </li>
        </ul>
    </li>
</ul>

The result is http://jsfiddle.net/6xzwdwfr/18/embedded/result/. But how do I make it so that it looks like http://jsfiddle.net/6xzwdwfr/21/embedded/result/?

Basically, I want to make sure that adding the image doesn't cause the navbar to enlarge.

I tried lessening some of the paddings and margins in the nav* classes, but it only made the matters worse.

How can I adjust it?

Amit Joki
  • 58,320
  • 7
  • 77
  • 95

3 Answers3

0

Remove top and bottom paddings from .navbar-nav > li > a

.navbar-nav > li > a {
  padding: 0px 12px;
  margin: 12.5px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
}
Zheka
  • 32
  • 4
0

If what you want is to put your image in the navbar so it fit in and keep the ratio, you might take a look at this answered post : How do I fit an image (img) inside a div and keep the aspect ratio?

Community
  • 1
  • 1
Luckyn
  • 563
  • 1
  • 4
  • 21
0

Try re-sizing the <a> that contains the image by adding the following code:

li.dropdown > a {
    height: 34px;
}

This way, the <a> element doesn't take up any more space than the <img> it contains. I tried it in your Fiddle and it worked.

aaplmath
  • 1,717
  • 1
  • 14
  • 27