Excluding search bar from Bootstrap's navbar collapse - html

Question

I know this question has already been asked here:
Bootstrap navbar search outside collapse.
Keeping my search bar viewable when my navbar collapses with twitter bootstrap
But mine is different in the sense that my search bar is located in the middle of other nav items, and I want all these other nav items to collapse except my search bar. I wasted a week trying to fix this, but every move I make creates a mess.
This is how my navbar looks:
https://postimg.org/image/7x623zbdi3/
HTML:
<div class="container" id="responsiveContainer">
<!-- Title -->
<div class="navbar-header pull-left">
<a class="navbar-brand" href="{% url 'index' %}"> abc </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="nav">
<li id="nav-form">
<form class="navbar-form">
<div class="form-group">
<input type="text" id="searchBox" class="form-control">
<button id="search" type="submit" class="btn btn-default"><span> <i class="fa fa-search"></i> </span></button>
</div>
</form>
</li>
<li class="dropdown">
Sign In/Up <b class="caret"></b>
<ul class="dropdown-menu" class="dropdownMenu">
<li> Sign Up </li>
<li> Sign In </li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-left" id="nav">
<li> Article </li>
<li> Contact </li>
</ul>
</div>
</div>
</nav>
Custom CSS:
#nav-form {
margin-right: -30px;
}
#nav input {
background-color: #D3212D;
color: white;
border: 1px solid #E32636;
}
#nav button {
background-color: #D3212D;
color: white;
border-radius: 60px;
border: 1px solid maroon;
box-shadow: 0px 0px 1px black;
font-family: FontAwesome;
font-size: 16px;
}
#nav button:hover {
background-color: #cd1b27;
box-shadow: 0px 0px 5px black;
}
input#search, select.form-control {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
box-shadow: 0px 0px 5px orange;
}
#navbarToggle {
background-color: #E32636;
margin-top: 0px;
border: 1px solid #E32636;
}
#navbarToggle:hover, #navbarToggle:focus {
text-shadow: 0px 0px 1px rgb(32,42,62);
background-color: #E32636;
}

Answer 1

One of those articles you referenced does it here.
The person took the
< form... /form>
section and put it in it's own div. The key is to keep it out of the class="collapse navbar-collapse"

Answer 2

After a lot of debugging I finally found the solution and here it is:
HTML:
<!-- Navigational Bar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="navbarToggle">
<span class="sr-only">Toggle navigation</span>
<span><i class="fa fa-list fa-2x"></i></span>
</button>
<div class="container" id="responsiveContainer">
<!-- Title -->
<div class="navbar-header pull-left">
<a class="navbar-brand" href="{% url 'index' %}"><img id="navbar-logo" src="/static/media/Images/ditookcolored.png"></a>
</div>
<div class="navbar-header pull-right">
<!-- <button class="btn btn-default" id="mobileSearch"><i class="fa fa-search"></i></button> -->
<ul class="nav navbar-nav navbar-right" id="nav">
<li id="nav-form">
<form class="navbar-form navbar-center" id="navbarForm">
<div class="form-group">
<input type="text" placeholder="Search Ditook" id="searchBox" class="form-control">
<button id="search" type="submit" class="btn btn-default"><span> <i class="fa fa-search"></i> </span></button>
</div>
</form>
</li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="nav">
<!-- <li id="nav-form">
<form id="navbarForm">
<div class="form-group">
<input type="text" placeholder="Search Ditook" id="searchBox" class="form-control">
<button id="search" type="submit" class="btn btn-default"><span> <i class="fa fa-search"></i> </span></button>
</div>
</form>
</li> -->
<li class="dropdown">
<i class="fa fa-arrow-circle-down"></i> Sign In/Up
<ul class="dropdown-menu">
<li><i class="fa fa-user-plus"></i> Sign Up </li>
<li><i class="fa fa-sign-in"></i> Sign In </li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-left" id="nav">
<li><i class="fa fa-list-alt"></i> Article </li>
<li><i class="fa fa-phone"></i> Contact </li>
</ul>
</div>
</div>
</nav>
This actually fixed my problem:
Custom CSS:
#nav input {
position: static;
margin-left: -400px;
}
#nav button {
position: static;
margin-left: -1px;
height: 35px;
}