Tenho uma navbar que trabalha com o collapse, pra quando em menor resolução o menu se agrupe e apareça só quando clicado. Enfim, tem como eu mudar o breakpoint somente da navbar para que este efeito ocorra numa outra resolução maior? Tentei mudar no bootstrap.css onde tinha referência a mesma, mas não tive resultado.
3 Respostas
Altere o max-width
de acordo com o desejado.
@media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Fonte: Bootstrap 3 - navbar collapsible until 990px
Exemplo: Bootply
-
Tentei alterar os itens acima, porém não obtive resultado. Aqui os break points vieram com min-width:768px. Mudei para max width (com a resolução que desejo) mas não resolveu.– Anderson15/04/2015 às 17:04
-
O meu, quando clico, ele abre quando clico, mas logo em seguida ele fecha. 30/12/2016 às 18:59
-
-
-
Resolve o problema da resolução de tela, mas a usabilidade fica inútil pois como disse o @FabioSouza clica e abre, mas logo em seguida fecha. 22/10/2017 às 15:01
Bem mais simples do que eu pensei,
Abra o arquivo do bootstrap.css, e utilizando o IDE de preferência é só aplicar um "replace all" para as seguintes strings:
@media (min-width:768
Trocar por
@media (min-width:990
Aí a responsividade da aplicação será aplicada quando o tela atingir os 990px
Sei que isto não resolve diretamente o problema apresentado, mas realmente não parece uma boa ideia ter breakpoints específicos para apenas um componente quando usual é que todo o layout os siga. Especificamente o Bootstrap 3 possui variáveis que lidam com isso e você pode gerar um build customizado. Caso contrário, a melhor abordagem é do Rafael Barbosa, aplicando um estilos CSS extras como um patch sobre as regras do Bootstrap.