Helping you build a better website
(and other interesting web stuff)

CSSHTMLjQueryWordPress
Silva Web Designs - Blog

Como alterar o ponto de interrupção do Bootstrap Navbar

Você já desejou alterar o ponto de interrupção padrão da barra de navegação do Bootstrap? Tenho certeza de que você provavelmente está aqui porque o colapso da barra de navegação está ocorrendo muito cedo (na largura de uma largura de tela) ou muito tarde (onde os links da barra de navegação começam a quebrar em larguras maiores).

<code class="language-CSS">
@media (max-width: 992px) {
    .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;
	}
}

Aqui está uma demonstração em JSFIDDLE.

Versões mais antigas

Se você estiver usando uma versão do Bootstrap anterior à 3.1, então este é o código que você precisará para alterar o ponto de interrupção da barra de navegação: -

<code class="language-CSS">
@media (max-width: 992px) {
    .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;
    }
}

Aqui está uma demonstração em JSFIDDLE.

Bootstrap 4

O Bootstrap 4 ainda está nas versões beta e fornece classes para facilitar a alteração do ponto de interrupção da barra de navegação. Agora, o ponto de interrupção da barra de navegação do Bootstrap 4 pode ser alterado usando as classes navbar-toggleable- *. Use as classes de utilitário hidden- * para mostrar / ocultar o botão de alternância.

Por exemplo, aqui está uma barra de navegação que recolhe no ponto de interrupção da tela pequena (sm) de 768 pixels. Observe a classe navbar-toggleable-sm no DIV em colapso.

<code class="language-HTML">
<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    <button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> ☰ </button> <a class="navbar-brand" href="#">Navbar sm</a>
    <div class="collapse navbar-toggleable-sm" id="collapsingNavbar2">
      <ul class="nav navbar-nav">
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
      </ul>
      <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
      </ul>
    </div>
  </div>
</nav>

Aqui está uma demonstração em JSFIDDLE.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Posted in CSS

Join the discussion