i don't want the search bar pushing down the header, alll i want is for it to float out on the timeline anytime there is a search instead of destroying the header. have tried to do it but in vain. please help a newbie

this is my code

<form role="search" class="navbar-left app-search pull-left hidden-xs">
<input type="text" placeholder="Explore PageOmni Search" id="search_page" class="form-control form-control-circle" />
<div style="background:#fff;padding-left:5px; width:300px;" id="display_pagers"></div>

</form>

The div where the form is placed should be made position: relative and the container that holds the search search results should be position absolute.

This answer might be vague until one sees the full HTML of the section on the page.

Nice work you got there.

onyengbu:
The div where the form is placed should be made position: relative and the container that holds the search search results should be position absolute.

This answer might be vague until one sees the full HTML of the section on the page.

Nice work you got there.

You have always come to my rescue. thanks alot. I can't post some codes now because am on mobile but that div that have some inline css is the one displaying the search results. Am using ajax to do this I will try your method when I get home

Have done it. I added z-index: 100 to the solution you gave me. And it worked fine. Thanks bro

cbrass:
Have done it. I added z-index: 100 to the solution you gave me. And it worked fine. Thanks bro

Good.

To make life easy for you next time, simply use the "input-group" bootstrap addon.

And use the class of "navbar-form navbar-right"

This will place the form in your header with no issue.

dwebdesign:
To make life easy for you next time, simply use the "input-group" bootstrap addon.

And use the class of "navbar-form navbar-right"

This will place the form in your header with no issue.

Thanks bro