Div hidden (under) bootstrap navbar - html

Question

I use bootstrap 3 to design my website. I defined a navbar-fixed-top.
I needed to define a div fixed top superposed on the navbar for a search form.
I used z-index (=16777271 to be sure) to put the search div over the navbar.
It works well on my Firefox browser (with any width) but when i try it on my phone, the search div doesn't appear.
Here are some parts of my code :
NavBar :
<div class="navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#navbar-rt-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="/toto/"><img src="/toto/img/logo.png" alt="toto" style="max-width:120px; margin-top: -15px;" /></a>
</div>
<div class="navbar-collapse collapse navbar-right" id="navbar-rt-collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-history"></i></li>
<li><i class="fa fa-user"></i></li>
</ul>
</div>
HTML for search div :
<div class="fixed-search">
<input name="query" value="" id="query" class="form-control" placeholder="Find ..." autocomplete="on" maxlength="255" type="text"/>
CSS for search div :
.fixed-search {
position: fixed;
z-index:16777271 !important;
top: 8px;
height: 35px;
}
.fixed-search-btn {
position: fixed;
z-index:16777270 !important;
top: 8px;
height: 35px;
}
I search for a solution on Google but I didn't find any discussion about this problem.
If someone have a solution to solve this problem or can explain from where it come, I am very interested.
Thank you, Best regards,
Raphael

Answer 1

Here is what I have achieved.
For this just replace your navbar markup along with the input with the code I provided below and also importantly remove your styles you have explicitly applied for fixed-search & fixed-search-btn. All these are unwanted codes. Just replace the navbar code with the below code, bootstrap & font-awesome will take care of the rest across all browsers.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/toto/"><img src="/toto/img/logo.png" alt="toto" style="max-width:120px; margin-top: -15px;" /></a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group fixed-search">
<input name="query" value="" id="query" class="form-control" placeholder="Find ..." autocomplete="on" maxlength="255" type="text"/>
</div>
<button type="submit" class="btn btn-default fixed-search-btn">Search</button>
</form>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-history"></i></li>
<li><i class="fa fa-user"></i></li>
</ul>
</div>
</div>
</nav>

Answer 2

I found a way to do what I wanted. I defined the problem differently : I want to put the search query in the fixed navbar, out of the sidebar. So my real question was : Can i put an input out of the form ? The answer is Yes. You can define the properties of your input equal to the form id. That's all and it works very well.
Thanks for help anyway !