Can search bar fixed in navigation bar -bootstrap in mobile view - wordpress

Question

I am a web developer and doing a responsive website using bootstrap and wordpress. I have a search bar in the main navigation bar. In the mobile view there comes a toggle button for menu and the search bar will be shown in the dropdown.
My problem is, i would like the search bar to be shown in the main navigation bar itself, not in dropdown, in mobile view. Is there any solution for this ?
Here is the website url : http://galtechprojects.com/wp_talichka/
Thanks in advance.
Following is my code of navigation part in header.php
<div class="top-bar-inner-left">
<!-- Navigation -->
<nav class="navbar " role="navigation" style="background-color:#000;">
<div class="container" style="padding-left:0px;padding-right:0px;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="background-color:#000;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding:left-0px;padding-right:0px;">
<!--START COL MD 9-->
<div class="col-md-9" style="overflow:hidden;">
<ul class="nav navbar-nav">
<li class="font">HELLO </li>
<li class="font">FASHION</li>
<li class="font">FOOD</li>
<li class="font">BEAUTY </li>
<li class="font">ART</li>
<li class="font"> PRESS</li>
<li class="font">ABOUT US</li>
<li class="font">CONTACT US</li>
</ul>
</div>
<!--START COL MD 3-->
<div class="col-md-3" style="padding-top:1%; overflow:hidden;padding-right:0px;">
<div class="bottom_search">
<span style="float:left;">
<form method="get" id="searchform" action="">
<div style="float: left;width: 100%;margin-top: 2%;"><input type="text" size="18" placeholder="SEARCH" value="" name="s" id="s" class="input" style="float: left" onfocus="clearvalu()" />
<input type="submit" id="searchsubmit" value="" class="btn1" />
</div>
</form>
</span>
</div>
</div>
<!--END COL MD 3-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>

Answer 1

Show us some code, but you could try to add it to the navbar-header.
So, I have to move your form to go inside the navbar-header. I modify a little your search bar, to add the default bootstrap search glyphicon.
<div class="top-bar-inner-left">
<!-- Navigation -->
<nav class="navbar" role="navigation" style="background-color:#000;">
<div class="container" style="padding-left:0px;padding-right:0px;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
style="background-color:#000;"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span
class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<form method="get" id="searchform" action="" class="navbar">
<div style="float: left;width: 100%;margin-top: 8%;" class="input-group">
<input type="text" size="18" placeholder="SEARCH" value="" name="s" id="s"
class="input" style="float: left" onfocus="clearvalu()">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-search"></i>
</div>
</div>
</form>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"
style="padding:left-0px;padding-right:0px;">
<!--START COL MD 9-->
<div class="col-md-9" style="overflow:hidden;">
<ul class="nav navbar-nav">
<li class="font">HELLO
</li>
<li class="font">FASHION
</li>
<li class="font">FOOD
</li>
<li class="font">BEAUTY
</li>
<li class="font">ART
</li>
<li class="font"> PRESS
</li>
<li class="font">ABOUT US
</li>
<li class="font">CONTACT US
</li>
</ul>
</div>
<!--START COL MD 3-->
<div class="col-md-3" style="padding-top:1%; overflow:hidden;padding-right:0px;">
<div class="bottom_search"> <span style="float:left;" class="">
</span>
</div>
</div>
<!--END COL MD 3-->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
Hope this helps you.
Here is a DEMO on bootply: DEMO