Responsive bootstrap nav with brand - html

Question

I'm having trouble keeping my navbar responsive. When the browser reaches a certain size, the height will increase. I made a fiddle to show what is happening, if you expand the preview, the navbar will be normal.
http://jsfiddle.net/x70r23cn/
.navbar {
background-color: #204489;
box-shadow: 0 4px 8px rgba(0,0,0,.25);
float: center;
}
.navbar a {
color: #fff;
}
.navbar-brand img {
margin-left: auto;
margin-right: auto;
height: 25px;
}
.navbar-brand {
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
float: none !important;
}
<nav class='navbar navbar-fixed-top'>
<div class='container'>
<div class='navbar-header'>
<button aria-controls='navbar' aria-expanded='false' class='navbar-toggle collapsed' data-target='#navbar' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<div class='navbar-brand'>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=271&h=25" />
</div>
</div>
</nav>

Answer 1

Remove the navbar-header class as it's designed to enable the collapse menu on mobile devices; that's why the navbar is expanding.
See example Snippet.
.navbar.navbar-custom {
background-color: #204489;
box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
float: center;
}
.navbar.navbar-custom a {
color: #fff;
}
.navbar.navbar-custom .navbar-brand {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
}
.navbar.navbar-custom .navbar-brand img {
margin-left: auto;
margin-right: auto;
height: 25px;
margin-top: -2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class='navbar navbar-custom navbar-fixed-top'>
<div class='container'>
<div class='navbar-brand'>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=271&h=25" />
</div>
</div>
</nav>

Answer 2

try this... the navbar-brand needs to be in the navbar-header and the navbar-brand needs to be inline or inline-block.
.navbar {
background-color: #204489;
box-shadow: 0 4px 8px rgba(0,0,0,.25);
float: center;
}
.navbar a {
color: #fff;
}
.navbar-brand img {
margin-left: auto;
margin-right: auto;
height: 25px;
}
.navbar-brand {
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
float: none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">
<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">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=271&h=25" />
</a>
</div>
</div>
<nav>