How to add a side column to the navbar when its viewed on mobile bootstrap
I have a site using bootstrap. It has a search bar at the top in a navbar which collapses when on mobile.
Below the navbar I have 2 columns on the left that are filled with about 30 radio buttons for choosing certain search filters. The other 10 columns display the search results.
On mobile, the user must scroll down past all the columns in order to see the search results. How can I have have the radio button 'collapse into the navbar' when the site is on mobile so that the radio buttons do not show until the user clicks the navbar icon. (the navbar icons is the 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">
...
adding this into 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 on the column with:
<div class="col-sm-2">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
...
</div>
</div>
allows one to have a button which will toggle collapsing and uncollapsing the column, on just mobile.
You could simply place everything in a class named 'pane'. If you make this pane just as high as the columns you want to show, with a overflow:hidden , you can expand it with javascript when the user click the button. I don't know if that is what you're looking for?