Fancy fullwidth navigation search box using twitter bootstrap

Now, we are going to learn how to make navigation search box to be fancy. For this tutorial, we follows twitter bootstrap and jquery and some custom css which is used to make full width search and hiding existing menu navigation.

From the twitter bootstrap doc, here is simple code snippet used to create navigation bar

including with navigation search box. So we need to show only search icon instead of showing search box while loading the page.For this we need to write css code . To do it only for 768px min width devices. So we need to use media query to handle.

Here is that css which is used for this

And we have used jquery to handle the events. It means when the user click the search icon then search box will shown to user with close(reset) icon.

If  user click the close icon then it should be close the search box

I thanks to  mouse0270 for this great widget and it quite useful. Also i have given demo for this and dont forget to share this.

Thank you..
Demo and Download