Fixed search bar with Bootstrap 3.0

Unless you've been living under a rock, you know about Bootsrap -- powerful mobile first front-end framework that enables web development with responsive design inmind. One of the most popular elements on any website is the top navigation bar and the search widget. Bootstrap provides all the necessary components to make these common elements but its not always easy to make them do what you need. On a recent project, one of the things that I found hard to accomplish was making the search bar fixed across different screen size. From a normal screen size of 1028px width down to 320px (phone). After doing some reading and hacking on a jsfiddle example, I was able to come up with a solution that worked well. You can play around with my solution here on jsfiddle

How it looks on the IPhone (width 320 px)

Using Bootstrap, nifity responsive util classes, hidden-xs and visible-x, I was able to reduce "CompAny" to just "C" allowing for a bigger search bar.

I also needed to adjust the style of the search bar widget. Some of the example on stackoverflow were lacking in this area.

On the other hand it looks like it should on the IPad, the search bar is a bit bigger and adjustable in the css. The company name is in full length "CompAny".

How it looks on the IPad