Search box doubles height of nav-bar on resizing

Question

I have a Bootstrap 3 responsive navbar with menu items on the left and a search box on the right which looks fine (height 50px) at widths greater than about 990px, and at widths less than 765px (the menu reduces to an icon), but between these widths the search box rises up above the menu and doubles the navbar height so that it starts to cover my content:

Good:

Bad:

What is the best way to stop this behaviour? (I don't want to make the navbar any taller.) Here's my code at the moment:

<!doctype html>
<html lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body id="body" style="padding-top: 50px;">

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container nav-container">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div class="navbar-collapse collapse">

<form action="/search/" class="navbar-form navbar-right" role="search">
<div class="form-group">
    <input class="form-control" placeholder="Search" type="text" name="q" value="">
</div>

    <div class="form-group">
    <select class="form-control" name="type">
        <option value="">Everything</option>
        <option value="blog.BlogPost" >Blog posts</option>
    </select>
    </div>
<input type="submit" class="btn btn-default" value="Go">
</form>

<ul class="nav navbar-nav">
<li class="active"><a href='#'>Home</a></li>
<li><a href='#'>Item One</a></li>
<li><a href='#'>Item Two</a></li>
<li><a href='#'>Another Item</a></li>
<li><a href='#'>About</a></li>
</ul>

</div>
</div>
</div>


<div class="front-page-container">
<h1>MAIN HEADING</h1>
<h2>Sub-heading</h2>

</div>
</body>
</html>

Answer 1

You need to add custom css for it for screen 991px to 767px

 @media (max-width: 991px) and (min-width: 767px){ .navbar .container { width: 100%!important; } .navbar-form .form-group { width: 120px; } .nav>li>a { padding: 10px 10px; } .navbar-form .form-control{ width:100%!important;} }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body id="body" style="padding-top: 50px;"> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container nav-container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <form action="/search/" class="navbar-form navbar-right" role="search"> <div class="form-group"> <input class="form-control" placeholder="Search" type="text" name="q" value=""> </div> <div class="form-group"> <select class="form-control" name="type"> <option value="">Everything</option> <option value="blog.BlogPost" >Blog posts</option> </select> </div> <input type="submit" class="btn btn-default" value="Go"> </form> <ul class="nav navbar-nav"> <li class="active"><a href='#'>Home</a></li> <li><a href='#'>Item One</a></li> <li><a href='#'>Item Two</a></li> <li><a href='#'>Another Item</a></li> <li><a href='#'>About</a></li> </ul> </div> </div> </div> <div class="front-page-container"> <h1>MAIN HEADING</h1> <h2>Sub-heading</h2> </div> </body>

Search box doubles height of nav-bar on resizing

Question

1 answers

solution1
1 2018-09-24 06:55:57

Search box doubles height of nav-bar on resizing

Question

1 answers

solution1 1 2018-09-24 06:55:57

solution1
1 2018-09-24 06:55:57