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::after {
content:"\a0";
display:block;
padding:2px 0;
line-height:1px;
border-bottom:2px solid #000;
}