Bootstrap3 and twitter integration

Question

I am trying to integrate twitter-typeahead with bootstrap3. I want to use typeahead inside the navigator.

The problem only occurs when the navbar is minimized and only on mobile devices (the problem, at least in the iPhone safari and BB10 browser), and this is the following:

The typeahead popup menu appears under the rest of the contents of the navigation bar:

BlackBerry10 Browser

Safari on iPhone

I tried setting the z-index and position:

.twitter-typeahead .tt-dropdown-menu { position: absolute !important; z-index:9999 !important; } 

I reproduced the problem here:

http://jsfiddle.net/zZpQg/3/

Why does this only happen on small mobile devices? How can I get a typeahead dropdown that will appear on top of the rest of the links?

Kind regards

Answer 1

I also added

 .tt-query { backgroud-color: #fff !important; } 

for input type.