Change the Break Point of Nav Bar Menu in Bootstrap 3.3

Mar 19, 2020 – 1 min read

Description

Bootstrap by Twitter is one of the most popular CSS framework for developing responsive and mobile-first websites. I will be talking about the break point of Nav Bar menu in mobile. Naturally, it will break at 768 pixel width but there are cases when we may need to change the break point of the Nav Bar using. This is maybe due to too many elements in the main menu.

Solution

Don’t hack bootstrap.min.css or bootstrap.css. This may cause issues now and also in the future if you decide to upgrade to a newer version of Bootstrap. The best approach is to use your own stylesheet. Use the code below.

@media (max-width: 1250px) {
   .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;
   }
}

You can change the value 1250 to the desired breakpoint.

Make sure your CSS is loaded after Bootstrap, this will overlap bootstrap.css.

If you need assistance with Bootstrap, contact me.