Websites that use Bootstrap 4 framework, sometimes need a bigger search form in the navigation bar. These websites might also need a drop-down or select input to provide better search. In such case, the fixed top navigation bar consists of a bigger search form along with the logo and menus.
Previously, we have done the same for Bootstrap version 3 as explained in this linked article. However, version 4 is the successor and more powerful than the previous one. Obviously, those techniques won’t work in Bootstrap 4 for a bigger search form with a drop-down in the navigation bar.
Navbar HTML for Bigger Search Form with Drop-down
First of all, we are writing the HTML markup to create the navbar. Here, Bootstrap version 4.1 is in use. Place the drop-down to the left of the search input. Correspondingly, put the button to the right. We’re using Bootstrap 4 ‘Input group’ addon for this purpose.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <form class="form-inline my-2 my-lg-0 navbar-form"> <div class="input-group input-group-search mx-auto"> <div class="input-group-prepend"> <button id="search-btn" class="btn btn-outline-light text-success dropdown-toggle" type="button" value="ALL" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ALL</button> <div id="search-dropdown" class="dropdown-menu"> <a class="dropdown-item" href="#">BLOG</a> <a class="dropdown-item" href="#">DOCS</a> <a class="dropdown-item" href="#">FORUM</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">ALL</a> </div> </div> <input type="search" class="form-control" placeholder="Search..." aria-label="Search" aria-describedby="search-button-addon"> <div class="input-group-append"> <button class="btn btn-success" type="submit" id="search-button-addon">🔍</button> </div> </div> </form> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link text-nowrap" href="#">Home Page<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link text-nowrap" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle text-nowrap" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> |
We have moved the form outside the collapse part and after the toggle button. Additionally, we have used two classes, navbar-form to the form itself and input-group-search to its first direct child. We will use these classes later to make the search form bigger and responsive in the navigation bar.
Also, this bigger search form with drop-down forces other menu items to wrap on the next line at white-spaces. We’re adding text-nowrap class to anchor elements inside the collapsible div to overcome this issue. That class is a utility class available in Bootstrap 4.
- Horizontal, Vertical Center Divs or List in BS4
- A Bootstrap 4 Carousel Full-screen Background Slider
Bootstrap 4 CSS for Search Form in Navigation Bar
We have used a couple of CSS rules to let the search form occupy remaining space in the navigation bar. Use the rules below in the stylesheet file created for your Bootstrap 4 project.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | body { padding-top: 56px; } .navbar-form { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-basis: 100%; -o-flex-basis: 100%; flex-basis: -moz-available; flex-basis: 100%; } .input-group-search { width: 100% !important; } @media(min-width:576px) { .navbar-expand-sm .input-group-search { width: 100% !important; } } @media(min-width:768px) { .navbar-expand-md .input-group-search { width: 90% !important; } } @media(min-width:992px) { .navbar-expand-lg .input-group-search { width: 80% !important; } /*body { padding-top: 110px; }*/ } @media(min-width:1200px) { .navbar-expand-xl .input-group-search { width: 70% !important; } } |
First of all, note that the unordered list of menus in the collapsible div has no margin or padding. Second, we expended the form till full available width in the navbar. The flex-basis sub-property of CSS3 Flexbox did this job for us.
Further, we did the same with the search container, consisting the drop-down, the search input and the button. This search container has the class input-group-search. By default, this search input group or container expands to 100% of its parent. In this case, there will be the full-width bigger search form in a new line below the brand and toggle button.
However, that rule applies till the device width is less than the breakpoint specified. As soon as the specified breakpoint reaches, the respective media query takes precedence. Correspondingly, the applicable CSS rule limits the width of the search box.
Further, the search input group has Bootstrap 4 mx-auto class applied as well. This utility class applies equal margins to the left and the right of the element. Thus, it keeps the search group in the horizontal centre of its parent. As per the flex-basic CSS rule, the form will always have the full width, minus occupied by the rest of the components.
Bigger Search Form – Grow/Shrink Width
Furthermore, you can grow or shrink the width of the search box till the form width in the navigation bar. Since it really depends on the number of menu items in the navbar. Play with the percentage width in the media queries if you want to either grow or shrink it.
Also, don’t forget to replace verticle margin class (my-lg-0) in the form with respect to the breakpoint class added in the nav element (navbar-expand-lg). For example, if you use the navbar-expand-md class then the form should have my-md-0 class. This will keep a decent margin between the search form and the menu in the collapsed state.
Prevent Overlapping of Fixed Top Navigation Bar
If the navbar is fixed to the top then it requires to prevent overlap with other elements. You can read more here about this problem. We have added top padding to the body at two places. First is when the navigation bar is in full width and another is in collapsed status.
There is the bigger search form with a drop-down which shifts below in collapsed condition. Hence, we need to double the top padding at this breakpoint. We’ve commented out this rule at the -lg breakpoint. you can uncomment that as well as shift inside another breakpoint.
Bigger Search Form with Drop-down – Changing Selected Text
The drop-down menu at the left of the search input doesn’t change the text automatically upon selection. So you need a little jQuery to let is work as expected.
0 1 2 3 4 5 6 | jQuery(document).ready(function($) { $('#search-dropdown a').click(function(){ $('#search-btn').html($(this).text()).val($(this).text()); return false; }); }); |
That’s all. Place this jQuery script in your JS file or in line. Preferably after necessary JS files as per Bootstrap 4 documentation. Finally, the best way to implement this solution is to copy the HTML and CSS and modify as per the project needs later.
Hope this solution gave you a beautiful, better and bigger search form with a drop-down in the Bootstrap 4 navigation bar. Don’t forget to update us with your feedback regarding the implementation.
Tons of thanks bro.