Show a form on a line following the collapsed navbar - html

Question

Here is my current code: https://www.bootply.com/EJSJ6aQh6Q
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span>...</span>
</button>
<a class="navbar-brand">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Bar<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a>A</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Foo<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a>A</a></li>
</ul>
</li>
<li>
<a>Subscribe</a> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="registerLink">Register</a></li>
<li><a id="loginLink">Sign In</a></li>
</ul>
<form class="nav navbar-form navbar-right col-md-6" id="autocompleteSearchForm" method="get" role="search">
<div class="input-group input-group-circle input-group-sm" role="search" id="searchGroup">
<span><div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset tt-dataset-songs"></div></div></span>
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search text-success"></i></button>
</span>
</div>
</form>
</div>
</div>
Currently, when collapsed, the search bar falls under the collapsed section. I would like the search bar to be outside of the collapsed section, but not on the same line as the navbar-brand and collapse button. If I move the form inside the navbar-header div, it accomplishes what I want, but the margins are all messed up because bootstrap still thinks the search bar is on the same line as the other items.
Is there a way to do this better, or will I just have to move it to the navbar-header and fix the formatting issues that pop up?

Answer 1

Is this what you looking for ? It is still a rough fix using css. I have interchanged the position of form block along with a css fix. Other responsive tweek can be made for other screen devices.
https://www.bootply.com/pGDMXu2Q2R#
HTML:
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span>...</span>
</button>
<a class="navbar-brand">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Bar<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a>A</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Foo<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a>A</a></li>
</ul>
</li>
<li>
<a>Subscribe</a> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="registerLink">Register</a></li>
<li><a id="loginLink">Sign In</a></li>
</ul>
</div>
<form class="nav navbar-form navbar-right col-md-6" id="autocompleteSearchForm" method="get" role="search">
<div class="input-group input-group-circle input-group-sm" role="search" id="searchGroup">
<span class="twitter-typeahead" style="position: relative; display: inline-block;"><input autocomplete="off" class="form-control typeahead-search tt-hint" type="text" value="" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><input autocomplete="off" class="form-control typeahead-search tt-input" id="home-search" name="searchString" placeholder="Search..." type="text" value="" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Open Sans", Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset tt-dataset-songs"></div></div></span>
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search text-success"></i></button>
</span>
</div>
</form>
</div>
CSS:
/* CSS used here will be applied after bootstrap.css */
#media (min-width:768px) {
.navbar-form{
position: absolute;
right: 135px;
top: 0;
}
}
#media (max-width:767px){
.twitter-typeahead{
display:block !important;
}
}