Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar

Twitter Bootstrap is a 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.

If you’re looking the same for Bootstrap version 4 then here is the link.

Fixed search box with dropdown

On a recent project, I had to implement a 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 drop-down where the user can select the search category.
  • The button drop-down text should change to selected text/menu on the 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 drop-down 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 selects search category, we wish to change the text of button drop-down with the selected option from the 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 drop-down attached with the search widget
  2. A responsive and always visible search form 

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

You Might Interested In


    1. Amit Sonkhiya says:

      Hello @disqus_8oRFGZWGJ8:disqus

      We were about to write the same for Bootstrap v4.1. Please wait for a week, hope we will have an update.


Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.