title: Can search bar fixed in navigation bar -bootstrap in mobile view
body: <p>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.</p>
  
  <p>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 : <a href="http://galtechprojects.com/wp_talichka/" rel="nofollow">http://galtechprojects.com/wp_talichka/</a></p>
  
  <p>Thanks in advance.</p>
  
  <p>Following is my code of navigation part in header.php</p>
  
  <pre><code>  &lt;div class="top-bar-inner-left"&gt;
  
      &lt;!-- Navigation --&gt;
      &lt;nav class="navbar " role="navigation" style="background-color:#000;"&gt;
          &lt;div class="container" style="padding-left:0px;padding-right:0px;"&gt;
              &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="background-color:#000;"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
  
              &lt;/div&gt;
  
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
              &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding:left-0px;padding-right:0px;"&gt;
  
  
              &lt;!--START COL MD 9--&gt;
              &lt;div class="col-md-9" style="overflow:hidden;"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
  
  
  
          &lt;li class="font"&gt;&lt;a href="index.html" class="active"&gt;HELLO &lt;/a&gt;&lt;/li&gt;
  
      &lt;li class="font"&gt;&lt;a href="fashion.html"&gt;FASHION&lt;/a&gt;&lt;/li&gt;
  
      &lt;li class="font"&gt;&lt;a href="#"&gt;FOOD&lt;/a&gt;&lt;/li&gt;
  
      &lt;li class="font"&gt;&lt;a href="#"&gt;BEAUTY &lt;/a&gt;&lt;/li&gt;
  
      &lt;li class="font"&gt;&lt;a href="#"&gt;ART&lt;/a&gt;&lt;/li&gt;
  
      &lt;li class="font"&gt;  &lt;a href="#"&gt;PRESS&lt;/a&gt;&lt;/li&gt;
  
      &lt;li class="font"&gt;&lt;a href="about.html"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
  
      &lt;li class="font"&gt;&lt;a href="about.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
  
  
  
  
  
                      &lt;/ul&gt;
                      &lt;/div&gt;
  
                      &lt;!--START COL MD 3--&gt;
                      &lt;div class="col-md-3" style="padding-top:1%; overflow:hidden;padding-right:0px;"&gt;
  
                      &lt;div class="bottom_search"&gt;
  
                      &lt;span style="float:left;"&gt;
  
  
      &lt;form method="get" id="searchform" action=""&gt;
          &lt;div style="float: left;width: 100%;margin-top: 2%;"&gt;&lt;input type="text" size="18" placeholder="SEARCH" value="" name="s" id="s" class="input" style="float: left" onfocus="clearvalu()"  /&gt;
      &lt;input type="submit" id="searchsubmit" value="" class="btn1" /&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  
                      &lt;/span&gt;
  
                      &lt;/div&gt;
  
                      &lt;/div&gt;
                      &lt;!--END COL MD 3--&gt;
                  &lt;/div&gt;
                  &lt;!-- /.navbar-collapse --&gt;
              &lt;/div&gt;
              &lt;!-- /.container --&gt;
          &lt;/nav&gt;
  
      &lt;/div&gt;
  </code></pre>