Navbar search box in the dropdown menu crashes other navbar icons - html

Question

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
background-color: transparent !important;
}
.nav > li a.dropdown-toggle {
text-align: right;
}
.dropdown-menu {
min-width: 20px !important;
}
.nav>li{vertical-align:top}
/* navbar-icon */
.nav {
// display: flex;
width: 100%;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
background-color: transparent;
}
.nav > li {
display: inline-block !important;
}
.nav_li_last_options {
float: right;
}
<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>
<!--navbar start-->
<nav class="navbar navbar-default navbar-fixed-top navbar_base">
<div class="container-fluid padding_right_0">
<ul class="nav navbar-nav navbar_ul_base" style="max-height: 50px;">
<li><i class="glyphicon glyphicon-comment"></i></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding: 15px; text-align: left">
<i class="glyphicon glyphicon-search"></i>
</a>
<ul class="dropdown-menu" style="width: 100%;">
<li>
<form class="navbar-form" style="width: 100%; margin: auto">
<div class="input-group input-group-sm">
<input class="form-control" placeholder="Search" id="searchbar" type="text">
<div class="input-group-btn">
<i class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</i>
</div>
</div>
</form>
</li>
</ul>
</li>
<li class="nav_li_last_options dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding: 15px;">
<i class="glyphicon glyphicon-option-horizontal"></i>
</a>
<ul class="dropdown-menu dropdown_menu_base">
<li>JavaScript</li>
</ul>
</li>
</ul>
</div>
</nav>
options: bootstrap3(3.3.7) and jquery3
I made navbar that has search icon. When I click search icon, search box in the dropdown menu will be opened.
But, On browser's width < 768, when I click search Icon, navbar and other icons are crashed.
Is there any good way to fix it?
How can I fix it?

Answer 1

According to bootstrap official documentation.
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
look Official documentation may help you