Добавленная CSS сбрасывает Navbar поэтому он не будет реагировать, вы, вероятно, не нужно все это CSS, но вам можно проверить ссылку ниже для получения дополнительной информации.
Вот ссылка на Документы Bootstrap для Non-Responsive CSS, где вы можете вытащить именно то, что вам может понадобиться.
Кроме того, в вашем jsfiddle, кажется, есть тег закрывающего тега, отсутствующий в вашем классе navbar-header.
/**FOR DEMO ONLY**/
@media (max-width: 767px) {
.navbar-default #search-group {
margin-top: 15px;
}
}
/** THE ABOVE FOR DEMO ONLY**/
.navbar-default .container .navbar-header,
.navbar-default .container .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
/* Always float the navbar header */
.navbar-default .navbar-header {
float: left;
}
/* Undo the collapsing navbar */
.navbar-default .navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-default .navbar-toggle {
display: none;
}
.navbar-default .navbar-collapse {
border-top: 0;
}
.navbar-default .navbar-brand {
margin-left: -15px;
}
/* Always apply the floated nav */
.navbar-default .navbar-nav {
float: left;
margin: 0;
}
.navbar-default .navbar-nav > li {
float: left;
}
.navbar-default .navbar-nav > li > a {
padding: 15px;
}
/* Redeclare since we override the float above */
.navbar-default .navbar-nav.navbar-right {
float: right;
}
/* Undo custom dropdowns */
.navbar-default .navbar .navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-width: 0 1px 1px;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #fff !important;
background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #999 !important;
background-color: transparent !important;
}
/* Undo form expansion */
.navbar-default .navbar-form {
float: left;
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Copy-pasted from forms.less since we mixin the .form-inline styles. */
.navbar-default .navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-default .navbar-form .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.navbar-default .navbar-form .form-control-static {
display: inline-block;
}
.navbar-default .navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-default .navbar-form .input-group .input-group-addon,
.navbar-default .navbar-form .input-group .input-group-btn,
.navbar-default .navbar-form .input-group .form-control {
width: auto;
}
.navbar-default .navbar-form .input-group > .form-control {
width: 100%;
}
.navbar-default .navbar-form .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.navbar-default .navbar-form .radio,
.navbar-default .navbar-form .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-default .navbar-form .radio label,
.navbar-default .navbar-form .checkbox label {
padding-left: 0;
}
.navbar-default .navbar-form .radio input[type="radio"],
.navbar-default .navbar-form .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-inline">
<a class="navbar-brand hidden-xs" href="/Home">
<img alt="Brand" src="http://placehold.it/100x25/ff0/ff0">
</a>
<div class="form-group" id="search-group">
<input type="text" class="form-control" placeholder="Search" id="searchQuery" name="searchQuery">
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="">About</a>
</li>
<li><a href="">Contact</a>
</li>
</ul>
</div>
</div>
</div>
Не уверен, что вы подразумеваете под "оставаться расширена в 1140px". Ваш navbar не сворачивается в мобильный вид до 768px, если вы не ссылаетесь на что-то еще, или вы хотите, чтобы он был мобильным до 1140px? Кроме того, поисковая панель предназначена для ссылок со ссылками или нажатия их, как в вашем jsfiddle? – vanburen
, когда навигационная панель сжимается до ~ 768, обрушиваются метки «about», «contact» и login («_loginPartial»). Я хочу прекратить это. – user1186050