Reputation: 1
I added an image size 53x53 next to the word Dropdown in my bootstrap navbar. The height of the navbar is 85px. adding the image makes the height resize to 100px I need it to remain 85px
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img class="image_top" src="myimage.png">Dropdown<span class="caret"></span></a>
.image-top {
float: left;
display: inline-block;
margin-top: 7px;
margin-right: 18px;
margin-left: 0;
margin-bottom: 4px;
padding-right: 10px;
}
Upvotes: 0
Views: 2856
Reputation: 36
You ckecked https://getbootstrap.com/components/#dropdowns? Documentation is very good..Eventhough it doesn't have an example with image dropdown i think..
You want something like this?
<div class="dropdown">
<button style = "padding: 3px;"class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="image_top"><img style = "max-width:20px; max-height: 20px;" src="myimage.png"></span>
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Upvotes: 1