How to display two nav bars in bootstrap while browsing through mobile and displaying content on it without use of button that bootstrap provides

Question

In bootstrap after adding a nav-bar when we access the site through mobile.We get a button and after clicking the contents of nav-bar are displayed. I want to add another search bar below it and it should be displayed without use of that button. Please help I am new to bootstrap. Thanks!

jsfindle link:http://jsfiddle.net/12zvx3z2/3/

On it the button on right most corner helps in displaying the nav bar.How to just make search bar visible without using button.

Answer 1

You can add a new navbar below the existing one

Code:

<nav class="navbar navbar-default"  style ="margin-top:0px;"  role="navigation">

<form class="navbar-form navbar-right" role="search">
        <div class="form-group" style="padding-right:10px;"> 
          <input type="text" class="form-control" placeholder="Search">

        <button type="submit" class="btn btn-default">Submit</button></div>
      </form>

</nav>

Explained in this Fiddle