Form in Bootstrap navbar has extra padding in collapsed mode - html

Question

I am using Bootstrap to build a site and am running into issues with the navbar. The navbar normally has the "brand" link and a search box, but when the navbar collapses I want it to be just the search box instead of just the brand link.
Here's the navbar uncollapsed:
navbar-sm
...and here's the navbar collapsed:
navbar-xs
and here's the code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand hidden-xs">FU</a>
</div>
<div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label class="sr-only" for="navbarSearchField">Search</label>
<input type="search" class="form-control" placeholder="Search" id="navbarSearchField">
</div>
</form>
</div>
</div>
</nav>
Any way I can get rid of the extra padding and lines above and below the search box? It shows up whether the search box is in the menu or on its own. As this is on an extra-small screen, I don't want to waste screen space if at all possible. :)

Answer 1

To remove the padding you can just override some CSS values of the .navbar-form. Use the appropriate media query so the changes only affect the xs screen size:
#media(max-width:768px) {
.navbar-form {
padding-top: 0;
padding-bottom: 0;
border: 0;
}
.navbar-form .form-group {
margin-bottom: 0;
}
}
See this demo fiddle.
Tip: When customizing Bootstrap CSS or any other framework it is useful to use your browser's inspection tools to figure out what CSS rules you need to modify.