How to add a side column to the navigation bar when viewed on a mobile bootstrap

Question

I have a website using bootstrap. It has a search bar at the top in the navigation bar that crashes on the mobile device.

Below the navigator, I have 2 columns on the left, which are filled with about 30 radio buttons for selecting specific search filters. The remaining 10 columns display the search results.

On a mobile device, the user must scroll down the page in all columns to view the search results. How can I set the "minimize to navigation bar" switch when the site is on a mobile device so that the switches do not appear until the user clicks the navigation bar icon. (navigation icons - 3 horizontal lines).

Navbar:

... <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left" action="search.php" method="post"> <div class="form-group"> <input type="text" class="form-control" name="search_title" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Search</button> ... 

left columns:

 <div class="row"> <div class="col-sm-2"> <p class="filter-heading" >Site</p> <label for="aa-site"> <input class="site-radio" type="radio" name="store" value="every-site" id="aa-site" checked> All</label></br> <label for="bb-site"> <input class="site-radio" type="radio" name="store" value="wallapop" id="bb-site"> Wallapop</label></br> ... </div> </form> <div class="col-sm-10"> <div class="panel-body center"> ... 

Answer 1

adding this to the header

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 

Then wrapping the contents in a column:

 <div class="col-sm-2"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> ... </div> </div> 

allows you to have a button that will switch to collapse and expand the column on a simple mobile device.

Answer 2

You can simply place everything in a class named panel. If you make this panel as tall as the columns you want to show with overflow:hidden you can expand it with javascript when the user clicks the button. I don’t know, is that what you are looking for?