Having trouble with a website design featuring a collapsed window and menu items, but the search bar is not displaying correctly? In image 3, you can see that the style of the search bar changes when the width exceeds a certain limit. I've tried various solutions but can't figure out why this happens. Any help or explanation would be greatly appreciated. I'm aiming for my design to look like the one in image 2.
Image1: https://i.sstatic.net/GJOS0.png
Image2: https://i.sstatic.net/UmrkX.png
Image3: https://i.sstatic.net/DxKq7.png
Fiddle: http://jsfiddle.net/bdd9U/1323/
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<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="#">Brand</a>
</div> <!-- End Navbar Header -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right" style="padding-right: 20px">
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> Item1</a></li>
<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> Item2</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder=""/>
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div><!-- End Navbar Collapse -->
CSS:
@media (max-width: 820px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-form {
width: auto;
position: relative;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 0px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}