Create collapsible title bar in Bootstrap (no navigation) - html

Question

I have created an application where the search function is the most important part. Therefore, I decided to put the search form in the title bar to have it available on every page. Works great, only on mobile devices I have the problem that the fluid layout causes the search fields to cover up most of the screen.
Thus, it would be great to collapse this title bar on mobile devices the same way a navigation bar does. Unfortunately, I did not get this working. I tried solving this with a navbar which did not work at all (see below).
Another idea of mine was to create two different search bars, a collapsed one and a hidden one and use Bootstrap's .hidden-* and .visible-* classes. Not sure how this would perform, apart from that I have not figured out yet how to create a non-navigation title bar in Bootstrap.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid col-md-12">
<div class='row'>
<div class='col-md-8'>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.php">Home</a>
</div>
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</div>
<div class='col-md-4' style='padding-top: 7px;'>
<!-- Session & status information go here -->
</div>
</div>
</div>
</nav>
Any idea how I can show my search fields on large screens and collapse them on mobile devices?

Answer 1

You did not give us much to work with, but as far as the collapsing goes I would go for a combination of css and jQuery. Here is the gist of how I would go about solving this problem by simply creating your own little "bootstrap-like" collapse.
html: Make your own little navigation structure with a button that will display your form on mobile devices.
<ul class="search-nav">
<li class="collapse-button">ICON</li>
<li class="search-form">
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</li>
</ul>
css: Make the collapse-button not show on large screen devices. On small screen devices the collapse-button can be displayed, but the form has to be hidden by default. All of this can be achieved using media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
.collapse-button{
display: none;
}
.search-form{
display: block;
}
#media (max-width: 480px){
.collapse-button{
display: block;
}
.search-form{
display: none;
}
}
jQuery: If the user clicks on the collapse-button the form will toggle between being displayed and not. Something like this:
$( ".collapse-button" ).click(function() {
$( ".search-form" ).toggle(function() {
$( ".search-form" ).css("display","block");
}, function() {
$( ".search-form" ).css("display","none");
});
});
This is just the general idea. I would probably actually go with setting max-height of the form to 0 and overflow:hidden on devices with small screen and a bigger max height on devices with a larger screen. This way you could add a css transition that would make it expand more fluently.