Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar

Fixed search box with dropdown

Twitter Bootstrap is powerful mobile first front-end framework that provides all the necessary components to develop responsive websites using its common elements. One of the most popular elements on any website is the top navigation bar and the search widget. On a recent project, I had to implement Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar and making the search bar fixed across different screen size. My requirements were the following:

  • An always visible search bar in bootstrap’s top navigation bar (navbar) regardless of screen size.
  • The search box should have an additional width and it should expand to full width on mobile screen size (less than 768px).
  • The search widget should contain a dropdown where user can select search category.
  • The button dropdown text should change to selected text/menu on change in search category (Default button dropdowns don’t have this functionality in twitter bootstrap).

After doing some reading and hacking, I was able to come up with a solution that worked well. You can play around with my solution to meet your requirement. Please note that bootstrap version 3.3.1 is used here.

Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar


Points to note:

  • Here we have placed the search form outside the collapsible div and below the ‘navbar-brand‘ class so that it can always stay visible (line no. 13 – 31). Later we will apply some CSS to maintain responsiveness.
  • We also made a dropdown button attached with search input textbox and we will apply a little JS to let searched category appear as button text.
  • Dropdown button, input textbox and search button are bundled within ‘input-group‘ class.

2. CSS

I also needed to adjust the style of the search bar widget.

3. JS 

 When a user select search category, we wish to change the text of button dropdown with selected option from list. To achieve so I have added a little JS code on document ready:

Hence Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar explained in this article gives us two advantage:

  1. A dropdown attached with search widget
  2. A responsive and always visible search form 

You can take advantage of bootstrap’s responsive utilities classes, ‘hidden-*‘ and ‘visible-*‘ to adjust brand logo size like the WordPress example below (line no 13, 14):

You Might Interested In