Каким образом и где можно сохранить Bootstrap гамбургер меню(navbar) при любом разрешении экрана а не только max-width: 767px
?
4 ответа
Подключите свои стили после стилей bootstrap
<link href="путь/до/бутстрапа" rel="stylesheet" type="text/css"/>
<link href="путь/до/ваших/стилей" rel="stylesheet" type="text/css"/>
Потом в желательно в конце ваших стилей добавьте медиазапрос т.е. так вместо 322 может быть любое число
@media screen and (max-height:322px) {
//тут пишите стили
}
Вот пример
@media screen and (max-height:322px) {
.navbar {
color:red;
}
}
Например, так:
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
@media screen and (max-width: 1920px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
Измените @media для данного класса в своих стилях(должны быть последними при привязке к странице). Должно заработать, если я понял вопрос.
Если пишите на Bootstrap 4, то есть классы регулирующие отображение гамбургера navbar-toggleable-*.
Вот подробная статья на английском
Если Bootstrap 3, то ответы уже дали другие комментаторы