ATUALIZAÇÃO DE 2018
Bootstrap 4
Alterar o ponto de interrupção da barra de navegação é mais fácil no Bootstrap 4 usando as navbar-expand-*
classes:
<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm
= menu móvel nas telas xs <576px
navbar-expand-md
= menu móvel em telas sm <768px
navbar-expand-lg
= menu móvel em telas md <992px
navbar-expand-xl
= menu móvel em telas LG <1200px
navbar-expand
= nunca use o menu móvel
(no expand class)
= sempre use o menu móvel
Se você excluir, navbar-expand-*
o menu móvel será usado nas all
larguras. Aqui está uma demonstração de todos os 6 estados da barra de navegação: Exemplo do Bootstrap 4 Navbar
Você também pode usar um ponto de interrupção personalizado (??? px) adicionando um pouco de CSS. Por exemplo, aqui estão 1300px.
@media (min-width: 1300px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
Bootstrap 4 personalizado Navbar Breakpoint
Exemplos de bootstrap 4 Navbar Breakpoint
Bootstrap 3
Para o Bootstrap 3.3.x, aqui está o CSS de trabalho para substituir o ponto de interrupção da barra de navegação. Mude 991px
para a dimensão de pixel do ponto em que deseja que a barra de navegação seja recolhida ...
@media (max-width: 991px) {
.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;
}
}
Exemplo de trabalho para 991px: http://www.bootply.com/j7XJuaE5v6
Exemplo de trabalho para 1200px: https://www.codeply.com/go/VsYaOLzfb4 (com formulário de pesquisa)
Nota: O acima funciona para qualquer coisa acima de 768px . Se você precisar alterá-lo para menos de 768px, o exemplo de menos de 768px está aqui .