WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How to change the Bootstrap Navbar Breakpoint

Have you ever wanted to change the default Bootstrap navbar breakpoint? I’m sure you’re probably here because either your navbar collapse is either happening too soon (at to wide of a screen width), or too late (where the navbar links start to wrap at wider widths).

By default, Bootstrap collapses (vertically stacks) the navbar at 768px. You can easily change this threshold using a simple CSS media query. For example, here we change the breakpoint threshold to 992 pixels, causing the navbar to collapse sooner.


@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;
	}
}

Here is a demo on JSFIDDLE.

Older Versions

If you’re using a version of Bootstrap before 3.1 then this is the code you will need to change the navbar breakpoint:-


@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;
    }
}

Here is a demo on JSFIDDLE.

Bootstrap 4

Bootstrap 4 is still in the beta versions, and provides classes to make changing the navbar breakpoint easier. Now the Bootstrap 4 navbar breakpoint can be changed using the navbar-toggleable-* classes. Use the hidden-* utility classes to show/hide the toggle button.

For example, here’s a navbar that collapse at the small screen (sm) breakpoint of 768 pixels. Notice the navbar-toggleable-sm class in the collapsing DIV.


<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>

Here is a demo on 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 and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

Posted in CSS

Join the discussion