bootstrap css searchbox not fit in navigation bar - html

Question

In my jsp page I want to put searchbox in the navigation bar items.
So I have done below code,click in the link(jsfiddle code).
jsfiddlecode link
But the problem is,search bar is not fit into the navigation bar itmes,when it is in mobile view. why it is not fit into the navigation bar??

Answer 1

You can place the button and the search form inside the navbar-header div so it won't become mixed in with the mobile navbar when the toggle button is clicked since it's currently included inside the nav links. Then you just need to adjust the placement of the toggle button.
*I also adjusted your navbar-nav since it's overlapping the search button at certain widths.
See working example Snippet.
$('#buttonsearch').click(function() {
$('#formsearch').slideToggle("fast", function() {
$('#content').toggleClass("moremargin");
});
$('#searchbox').focus()
$('.openclosesearch').toggle();
});
body {
padding-top: 70px;
}
.searchbardiv {
display: block;
position: fixed;
background: #7D1935;
top: 50px;
right: 0px;
width: 100%;
max-width: 100%;
padding: 10px;
margin: 0px;
}
#formsearch {
display: none;
}
.buttonsearch {
position: fixed;
color: white;
top: 15px;
right: 10px;
background-color: transparent;
border: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.buttonsearch:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0px;
}
.buttonsearch:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline: none;
border: 0px;
}
.glyphicon.glyphicon-search {
font-size: 18px;
}
#searchbox {
box-shadow: none;
padding: 8px 14px;
}
#searchbox:hover {
box-shadow: none;
}
.form-control:focus {
border-color: #ccc;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
margin-right: 10px;
}
}
#media (max-width: 767px) {
.navbar .navbar-toggle {
margin-right: 50px;
}
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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="#">MyCompany</a>
<button type="button" class="buttonsearch" id="buttonsearch">
<i class="glyphicon glyphicon-search openclosesearch"></i>
<i class="glyphicon glyphicon-remove openclosesearch" style="display:none"></i>
</button>
<form role="search" method="get" class="searchbardiv" id="formsearch">
<div class="input-group">
<input type="text" id="searchbox" class="form-control" name="s" id="s">
<div class="input-group-btn">
<button class="btn btn-default" id="searchsubmit" type="submit">
<strong>Search</strong>
</button>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li>
link1
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="well">
Content
</div>
</div>

Answer 2

You can write media css for phone ..just add
#media (max-width: 767px) {
#buttonsearch{
margin-right:20%;
}
}
It will do margin-right to Landscape phone , portrait tablet to phone