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.

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

1. HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
    	<div class="navbar-header">
      		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".upper-navbar">
        		<span class="sr-only">Toggle navigation</span>
        		<span class="icon-bar"></span>
        		<span class="icon-bar"></span>
        		<span class="icon-bar"></span>
      		</button>
      
      		<a class="navbar-brand" href="http://localhost:8080/test/" title="My Project" rel="home">My Project</a>
      
	  		<form class="navbar-form pull-left" role="search" method="get" id="searchform" action="http://localhost:8080/test/">
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" id="searchcategory" value="BLOG" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">BLOG <span class="caret"></span></button>
		
        				<ul id="searchdropdown" class="dropdown-menu" role="menu">
          					<li><a href="javascript:void(0)">BLOG</a></li>
          					<li><a href="javascript:void(0)">FORUM</a></li>
          					<li><a href="javascript:void(0)">DOCS</a></li>
		  					<li class="divider"></li>
          					<li><a href="javascript:void(0)">ANY</a></li>          
        				</ul>
					</div>
					<input type="text" class="form-control" value="" placeholder="Search..." name="s" id="s">
					<div class="input-group-btn">
						<button type="submit" id="searchsubmit" value="Search" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
					</div>
				</div>
    		</form>    
		</div><!-- /.navbar-header -->
    	<div class="collapse navbar-collapse upper-navbar">    	 
      		<ul id="menu-topmenu" class="nav navbar-nav navbar-right">
      			<li id="menu-item-1"><a href="#one">Page I</a></li>
				<li id="menu-item-2"><a href="#two">Page II</a></li>
               	<li id="menu-item-3"><a href="#three">Page III</a></li>
	  		</ul>	  
     	</div><!-- /.navbar-collapse -->
	</div>
</nav>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="http://localhost:8080/test/" title="My Project" rel="home">My Project</a>

<li><a href="javascript:void(0)">FORUM</a></li>

</ul>

</div>

</div>

</form>

</div>

</ul>

</div>

</div>

</nav>

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.

body { /* Body offset for fixed navbar */
	padding-top: 70px; 
}

.navbar .navbar-form { /* Positioning the form */
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#searchcategory { /* Dropdown within searchbar */
	width: 100px;
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}

@media(max-width:767px) {
    body { /* Body offset for fixed navbar for mobile devices */
		padding-top: 140px; 
	}
	
	.navbar .navbar-form {
        width: 100% /* Full width search box for mobile devices */
    }
}


/* Media queries to adjust form width */
@media(min-width:768px) {
    .navbar-form .input-group>.form-control {
		width: 200px;	
	}
}

@media(min-width:992px) {
	.navbar-form .input-group>.form-control {
		width: 270px;	
	}
}

@media(min-width:1200px) {
	.navbar-form .input-group>.form-control {
		width: 370px;	
	}
}

body { /* Body offset for fixed navbar */

padding-top: 70px;

}

.navbar .navbar-form { /* Positioning the form */

padding-top: 0;

padding-bottom: 0;

margin-right: 0;

margin-left: 0;

border: 0;

-webkit-box-shadow: none;

box-shadow: none;

}

#searchcategory { /* Dropdown within searchbar */

width: 100px;

color: #333;

background-color: #e6e6e6;

border-color: #adadad;

}

@media(max-width:767px) {

body { /* Body offset for fixed navbar for mobile devices */

padding-top: 140px;

}

.navbar .navbar-form {

width: 100% /* Full width search box for mobile devices */

}

/* Media queries to adjust form width */

@media(min-width:768px) {

.navbar-form .input-group>.form-control {

width: 200px;

}

@media(min-width:992px) {

.navbar-form .input-group>.form-control {

width: 270px;

}

@media(min-width:1200px) {

.navbar-form .input-group>.form-control {

width: 370px;

}

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:

$(document).ready(function() {
	
	$("#searchdropdown li a").click(function(){
		$("#searchcategory").html($(this).text() + ' <span class="caret"></span>');
      	$("#searchcategory").val($(this).text());
	});
});

$(document).ready(function() {

$("#searchdropdown li a").click(function(){

$("#searchcategory").html($(this).text() + ' <span class="caret"></span>');

$("#searchcategory").val($(this).text());

});

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

A drop-down attached with the search widget
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):

/* WordPress example */

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".upper-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      
      <a class="navbar-brand hidden-xs" href="<?php echo home_url('/'); ?>"  title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><span class="glyphicon glyphicon-home"></span></a>
      <a class="navbar-brand visible-xs" href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a>
      
	  <?php get_search_form(); ?>
    </div><!-- /.navbar-header -->
    <div class="collapse navbar-collapse upper-navbar">    	 
      <?php				
          $args = array(
            'theme_location' => 'upper-bar',
            'depth' => 0,
            'container'	=> false,
            'fallback_cb' => false,
            'menu_class' => 'nav navbar-nav navbar-right',
            'walker' => new BootstrapNavMenuWalker()
          );
          wp_nav_menu($args);
      ?>
	  </div><!-- /.navbar-collapse -->
  </div>
</nav>



/* Search form is placed in functions.php */

function my_search_form( $form ) {
    $form = '<form class="navbar-form pull-left" role="search" method="get" id="searchform" action="' . home_url('/') . '" >
	<div class="input-group">
	<div class="input-group-btn">
		<button type="button" id="searchcategory" value="BLOG" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">BLOG <span class="caret"></span></button>
		<ul id="searchdropdown" class="dropdown-menu" role="menu">
          <li><a href="javascript:void(0)">BLOG</a></li>
          <li><a href="javascript:void(0)">FORUM</a></li>
          <li><a href="javascript:void(0)">DOCS</a></li>
		  <li class="divider"></li>
          <li><a href="javascript:void(0)">ANY</a></li>          
        </ul>
	</div>
	<input class="form-control" type="text" value="' . get_search_query() . '" placeholder="' . esc_attr__('Search') . '..." name="s" id="s" />
	<div class="input-group-btn">
		<button type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
	</div>
	</div>
    </form>';
    return $form;
}
add_filter( 'get_search_form', 'my_search_form' );

/* WordPress example */

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand hidden-xs" href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><span class="glyphicon glyphicon-home"></span></a>

<a class="navbar-brand visible-xs" href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a>

<?php get_search_form(); ?>

</div>

<?php

$args = array(

'theme_location' => 'upper-bar',

'depth' => 0,

'container' => false,

'fallback_cb' => false,

'menu_class' => 'nav navbar-nav navbar-right',

'walker' => new BootstrapNavMenuWalker()

);

wp_nav_menu($args);

</div>

</div>

</nav>

/* Search form is placed in functions.php */

function my_search_form( $form ) {

$form = '<form class="navbar-form pull-left" role="search" method="get" id="searchform" action="' . home_url('/') . '" >

<li><a href="javascript:void(0)">FORUM</a></li>

</ul>

</div>

</div>

</form>';

return $form;

}

add_filter( 'get_search_form', 'my_search_form' );

10 COMMENTS

MrNams says:
September 21, 2018 at 7:08 am
Can any one post same for latest bootstrap version 4+
1. Amit Sonkhiya says:
  September 21, 2018 at 10:06 am
  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.
2. Amit Sonkhiya says:
  October 17, 2018 at 11:13 am
  Hello @disqus_8oRFGZWGJ8:disqus
  Please visit the following article for the same in Bootstrap version 4+
  https://fellowtuts.com/bootstrap/bigger-search-form-dropdown-navigation/
  1. MrNams says:
    October 20, 2018 at 8:31 am
    Tons of thanks bro
  2. MrNams says:
    October 20, 2018 at 8:51 am
    https://uploads.disquscdn.com/images/d36004be37d4bb93d7f3d634bd9ca9180978258c2d86fc1613ea076c2b01dfd3.png
    1. Amit Sonkhiya says:
      October 22, 2018 at 10:17 pm
      @disqus_8oRFGZWGJ8:disqus
      It can be done definitely, just required our time and effort. If you could consider about this then I would be happy and appreciate you. Do let me know by writing to contact@astech.solutions
  3. MrNams says:
    October 20, 2018 at 8:52 am
    Thanks a lot,
    Sorry i am making more demand
    Can we implement navbar like youtube
    as shown attached image
Ismail Ulla says:
July 26, 2017 at 12:17 am
Thanks.
I need to implement it on http://festcoupon.com
pramod mishra says:
November 17, 2016 at 10:12 am
thanks,,,, it solved my problem
Adi says:
January 2, 2015 at 4:25 pm
Thank you. I was looking for this. Works perfect.

Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar

10 COMMENTS

Leave a Reply Cancel reply