Brand Image too big and not aligned on Bootstrap navbar - html

Question

I am having some problems with my navbar-brand for the navbar on my site. I want it to appear vertically aligned and as a smaller size, could you suggest how this could be achieved.
<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #FFFFFF">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="http://www.howlongagogo.com/assets/GOGO.png"></a></div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Enter Date</li>
<li class="hidden-xs" style="padding-top:15px"><div class="fb-like" data-href="https://www.facebook.com/howlongagogo" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div style="width:100%;height:10px;background-color:#428BCA;"></div>
</div>
I have also created a bootply for convenience http://www.bootply.com/XDybrUMhJ2
Thanks

Answer 1

You can constrain the size of the image and use line-height to center things. See SO Post also.
.navbar.navbar-wrap3 .navbar-brand {
padding: 0;
margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
height: 75px;
width: 300px;
padding: 0;
margin: 0;
left: 0;
}
.navbar.navbar-wrap3 {
background: #77B69C;
border-bottom: 10px solid #428BCA;
}
.navbar.navbar-wrap3 .navbar-header {
height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
margin-top: 20px;
}
#media (min-width: 768px) {
.navbar.navbar-wrap3 .navbar-nav > li > a {
line-height: 45px;
}
}
#media (max-width: 360px) {
.navbar.navbar-wrap3 .navbar-brand img {
height: auto;
width: 210px;
padding: 0;
margin: 4px 0;
left: 0;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
line-height: 20px;
}
.navbar.navbar-wrap3 .navbar-toggle {
margin-top: 8px;
}
.navbar.navbar-wrap3 .navbar-header {
height: auto;
}
body {
background: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top navbar-wrap3" role="navigation" style="background-color: #FFFFFF">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="http://www.howlongagogo.com/assets/GOGO.png">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Enter Date
</li>
<li class="hidden-xs" style="padding-top:15px">
<div class="fb-like" data-href="https://www.facebook.com/howlongagogo" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<div style="width:100%;height:10px;background-color:#428BCA;"></div>
</div>

Answer 2

Replace code
<a class="navbar-brand" href="/"><img src="http://www.howlongagogo.com/assets/GOGO.png"></a>
with
<a style="background-image: url("http://www.howlongagogo.com/assets/GOGO.png"); width: 324px; height: 68px;" class="navbar-brand" href="/"></a>