JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="navbar-div">
	<nav class="navbar navbar-default">
		<ul class="nav navbar-nav">
			<li><a href="/"> <img alt="Home" style="height:100%" src="http://www.ceal-asbestos.com/images/welcome%20button%20copy.jpg"></a></li>
		</ul>
	</nav>
</div>

CSS

.navbar-div {
	max-height: 50px;
	height: 50px;
	min-width: 933px;
}

.navbar-div nav {
	height: 100%;
	padding: 0px;
	margin: 0px 0px 10px;
	border: 0;
	box-shadow: none;
	background-image: none;
	border-radius: 0px;
	background-color: #99d4f5;
}

.navbar-div ul, .navbar-div li, .navbar-div a {
	height: 100%;
}

.navbar-div ul>li>a {
	padding: 10px;
}

.navbar-div a img, .navbar-div a {
    border: none; 
    overflow: hidden; 
    float: left; 
}

.navbar-div a:hover { 
    border-bottom: 5px solid black; 
}

.navbar-div a:hover img { 
    margin: -5px; 
}