Bootstrap: Search box disappears on touch in collapsed Navbar mode - css

Question

I have a search box placed inside a bunch of <li> tags in my Bootstrap Navbar. It works fine in regular mode; however, when collapsed, it disappears upon touch, along with the rest of the drop-down. Here's the HTML markup:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#"><img src="bootstrap/img/gray_logo.png" class="site-logo"><span class="site-name-first">Always</span><span class="site-name-second">Spanish</span></a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" ng-controller="HeaderController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/about')}">About</li>
<li ng-class="{ active: isActive('/blog')}">Blog</li>
<li>Premium</li>
<li>Books</li>
<li>Contact</li>
<li>
<!-- Search box -->
<form class="navbar-form pull-right search-box" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
I understand this is by design as the drop down must disappear once an item is tapped. But this functionality also means one wouldn't be able to use the search box in the collapsed mode. Is there any (preferably pure CSS) workaround? Here's the drop down I am talking about:
This is what the navbar looks like on a regular desktop viewport:
Here's the complete CSS:
* {
border-radius: 0 !important;
}
#media (max-width: 760px) {
h1 {
font-size: 210%;
}
.jumbotron p {
font-size: 120%;
}
}
.navbar-text > a {
color: inherit;
text-decoration: none;
}
body {
padding-top: 50px;
}
.row-padding {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 50px;
}
p {
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Oswald', sans-serif;
}
.site-name-first {
padding-left: 10px;
font-family: 'Caesar Dressing', cursive;
font-size: 1.5em;
color: #6495ed;
}
.site-name-second {
font-family: 'Caesar Dressing', cursive;
font-size: 1.5em;
color: #ff6666;
}
.site-logo {
float:left;
margin-top: -8px;
width: 36px;
}
/* CSS to change Navbar collapse threshold [START]
===================================================================*/
#media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
/* CSS to change Navbar collapse threshold [END]
===================================================================*/
#media (min-width: 761px) {
.navbar-default {
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 0px;
color: #666666;
margin: 0px;
}
}
#media (max-width: 760px) {
.navbar-default {
background-color: rgba(255, 255, 255, 1);
border-bottom: 0px;
color: #666666;
margin: 0px;
}
}
/*.search-box {
margin-right: -15px;
}*/
.navbar-static-bottom {
background-color: #ffcc00;
border: none;
color: #665100;
margin-bottom: 0px;
padding-top: 0px;
}
.navbar-static-bottom .socials {
color: #665100;
}
.footer-text {
padding-top: 17px;
}
.footer-text a {
color: #665100;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:focus {
outline: none;
color: #70704c;
font-weight: 700;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: #ffffff;
box-shadow: inset 0 -5px 0 0 #665100;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #ffffff;
box-shadow: inset 0 -5px 0 0 #cca300;
color: #cca300;
transition: color 0.15s ease;
}
/* when a dropdown menu item is clicked open */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #ffffff;
box-shadow: inset 0 -5px 0 0 #cca300;
}
.home-thumb img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.thumbnail img {
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
width: 100%;
}
.thumbnail {
overflow: hidden;
}
.bg-gray {
background-color: #f9f9f9;
}
.facebook-color:hover { color: #3b5998; }
.twitter-color:hover { color: #4099ff; }
.googleplus-color:hover { color: #d50f25; }
.youtube-color:hover { color: #c4302b; }
.pinterest-color:hover { color: #c92228; }
.top-jumbotron {
background: #ffcc00;
height: 500px;
margin: 0px;
border: none;
}
.second-jumbotron {
margin: 0px;
background: #332800;
color: #ffcc00;
font-size: 500%;
line-height: 50%;
padding-top: 0.3em;
padding-bottom: 0.6em;
font-family: 'Mr Dafoe', cursive;
}
.contact-box {
border-color: #ffcc00;
}
.contact-title {
text-align: center;
background-color: #ffcc00;
border-color: #ffcc00;
}
.contact-title h4 {
font-size: 220%;
color: #545454;
}
.contact-body {
background-color: #ffea99;
border-color: #ffea99;
color: #545454;
}
.contact-footer {
background-color: #ffcc00;
border-color: #ffcc00;
}
.contact-field {
background-color: #fff9e5;
box-shadow: #b2b2b2 0px 0px 8px;
}
.contact-field:hover,
.contact-field:focus {
background-color: #fff;
box-shadow: #b2b2b2 0px 0px 03px inset;
}
.contact-field-single {
height: 3em;
}
.contact-send {
background-color: #4c3d00;
border-color: #4c3d00;
color: #ffffff;
width: 7em;
}
.contact-send:hover,
.contact-send:focus,
.contact-send:active {
background-color: #2d2400;
border-color: #2d2400;
color: #ffffff;
}
.contact-close {
background-color: #938a66;
border-color: #938a66;
color: #ffffff;
width: 7em;
}
.contact-close:hover,
.contact-close:focus,
.contact-close:active {
background-color: #81774c;
border-color: #81774c;
color: #ffffff;
}
.airmail {
width: 50px;
float: left;
padding: 0px;
}
.pre-footer-jumbotron {
background-color: #ffefb2;
height: 50px;
margin-bottom: 0px;
}

Answer 1

As far as I'm concerned the easiest solution is to remove the form from li and add it separately as described in bootstrap documentation.
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/about')}">About</li>
<li ng-class="{ active: isActive('/blog')}">Blog</li>
<li>Premium</li>
<li>Books</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right search-box" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
bootstrap documentation