Bootstrap Navbar Expands when Window gets smaller - html

Question

Regular
Smaller
My bootstrap 3.0 navbar expands when the window gets to mobile sizes. I've included pictures of the two views above and where the issue is.
I am trying to get my navbar to not expand when the screen gets smaller and cover part of my page.
It may have something to do with the search bar and the buttons near it. I managed to get the search form stay the same size when it expanded across the entire screen behind the sidebar before.
Any help would be great.
HTML
`
<a class="navbar-brand" style="margin-left: -20px">GCImage</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-right">
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" align="right" ng-model="nav.keyword" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
</div>
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
<i class="fa fa-search"></i>
</button>
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a>
</form>
</div>
</div>
`
CSS
.panel-green {
border-color: #5cb85c;
background-color: #5cb85c;
color: #ffffff;
}
.panel-orange {
border-color: #ff7e47;
background-color: #ff7e47;
color: #ffffff;
}
.shadow {
-moz-box-shadow: 1px 1px 2px 3px #ccc;
-webkit-box-shadow: 1px 1px 2px 3px #ccc;
box-shadow: 1px 1px 2px 3px #ccc;
}
.panel-footer {
color: #000000;
}
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.body{
margin-left:175px
}
.navbar .navbar-form{
padding: 0 15px;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.box{
border-radius:0;
}
.navbar-collapse.collapse{
display: block !important;
}
.navbar-nav>li, .navbar-nav{
float: left !important;
}
.navbar-nav.navbar-right:last-child{
margin-right: -15px !important;
}
.navbar-right{
float: right !important;
}

Answer 1

It looks like the icons are wrapping underneath the search bar
I played around with your code a little and came up with a solution, however the icons eventually wrap when the screen gets really small (less than 250px wide)
Try changing this code:
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
<i class="fa fa-search"></i>
</button>
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a>
To this code:
<div class="icons">
<ul class="icon-list">
<li class="icon">
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
<i class="fa fa-search"></i>
</button>
</li>
<li class="icon">
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a>
</li>
</ul>
</div>
And add this to your stylesheet:
.icons {
float: right;
}
ul.icon-list {
padding: 0px;
margin: 0px 0px 0px 4px;
}
li.icon {
display: inline;
list-style: none;
}
.form-group {
display: inline-block !important;
}
This solution isn't perfect, and could be improved (make a backup of your old code before trying this)

Answer 2

Just add
.navbar-header{
display: inline-block; or display: inline-block!important;
}
in your stylesheet. I hope this is what you expect. :)