1

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 3

1

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

5
  • 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.
    – Anderson
    15/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
  • O meu também está dessa maneira, alguém sabe como resolver?
    – Sr. Bigode
    20/07/2017 às 10:58
  • @FabioSouza Você conseguiu?
    – Sr. Bigode
    20/07/2017 às 10: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
0

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

Utilizando a IDE phpStorm: Utilizando a IDE phpStorm

0

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .