Bootstrap: How to Collapse Navbar Earlier

Change bootstrap navbar collapse breakpoint without using LESS

You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.

how to collapse bootstrap 4 navbar

You need to include CDN version of jQuery before it, it's written in the bootstrap documentation.
https://getbootstrap.com/docs/4.4/getting-started/download/

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

Collapsing Bootstrap Responsive Navbar Earlier

You could go to the Bootstrap customization page and change the variable for the width that the navbar collapses at @navbarCollapseWidth

This is a screenshot of its location on the Bootstrap 2.3.2 page, but you can do a similar thing with Bootstrap 3.0 as well. They just name it differently.

You do that and hit the download button at the bottom, and use that bootstrap.css file instead of the default one and everything should be good.

How to make Navbar collapse from 1024 pixel screen size

Use the following css code and give the value as you wish. This will give the breakpoint to the collapsed menu.

Updated.
I added an extra class to each place .navigatsioon . Then it worked

@media (max-width: 1024px) {

  .navigatsioon ul.nav.navbar-nav {

    margin-left: -15px;

  }

  .navigatsioon .navbar-header {

    float: none;

  }

  .navigatsioon .navbar-left,

  .navbar-right {

    float: none !important;

  }

  .navigatsioon .navbar-toggle {

    display: block;

  }

  .navigatsioon .navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  }

  .navigatsioon .navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

  }

  .navigatsioon .navbar-collapse.collapse {

    display: none!important;

  }

  .navigatsioon .navbar-nav {

    float: none!important;

    margin-top: 7.5px;

  }

  .navigatsioon .navbar-nav>li {

    float: none;

  }

  .navigatsioon .navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

  }

  .navigatsioon .collapse.in {

    display: block !important;

  }

}

.navbar-nav.navbar-center {

    position: absolute;

    left: 45%;

    transform: translatex(-45%);

}

.navbar .navbar-brand {

  padding-top: 5px;

  padding-left:150px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="navbar navbar-default navbar-fixed-top navigatsioon">

  <div class="container-fluid">

    <div class="navbar-header navigatsioon">

      <button button type="button" class="navbar-toggle collapsed navigatsioon" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

      <a class="navbar-brand navbar-center navigatsioon" rel="home" href="#" title="Buy Sell Rent Everyting" >

        <!--<img style="max-width:100px; margin-top: -7px;"

        src="//www.google.com/favicon.ico">

     -->

        <img style=" margin-top: -7px;" src="http://madisonmountaineering.com/wp-content/uploads/2014/03/MM_header_logo.png">

      </a>

    </div>

    <div id="navbar" class="collapse navigatsioon navbar-collapse navbar-responsive-collapse">

      <ul class="nav navigatsioon navbar-nav navbar-center">

        <li><a href="http://madisonmountaineering.com/about/">ABOUT</a></li>

        <li><a href="http://madisonmountaineering.com/#expeditions">EXPEDITIONS</a></li>

        <li><a href="http://madisonmountaineering.com/gallery/">GALLERY</a></li>

        <li><a href="http://madisonmountaineering.com/#press">PRESS</a></li>

        <li><a href="http://madisonmountaineering.com/garrettmadison/">GARRETT MADISON</a></li>

        <li><a href="http://madisonmountaineering.com/#contact">CONTACT US</a></li>

        <li><a href="http://madisonmountaineering.com/dispatches/" style="color: red !important;">DISPATCHES</a></li>

        <li><a href="https://www.facebook.com/MadisonMtng" class="icon_ref"><i class="fa fa-facebook" style="color: #3b5998;"></i></a></li>

        <li><a href="https://twitter.com/madisonmtng" class="icon_ref"><i class="fa fa-twitter" style="color: #00aced;"></i></a></li>

        <li><a href="https://youtube.com/madisonmtng" class="icon_ref"><i class="fa fa-youtube" style="color: #bb0000;"></i></a></li>

        <li><a href="https://instagram.com/madisonmtng" class="icon_ref"><i class="fa fa-instagram" style="color: #5e3e23;"></i></a></li>

        <li><a href="https://plus.google.com/madisonmtng" class="icon_ref"><i class="fa fa-google-plus" style="color: #dd4b39;"></i></a></li>

      </ul>

    </div>

  </div>

</div>

Bootstrap - Change breakpoint navbar?

Bootstrap 5.0

Bootstrap 5 still uses the navbar-expand* classes to determine the Navbar's collapse breakpoint. There is now an additional navbar-expand-xxl class.

Bootstrap 5 - Navbar Tiers

Bootstrap 4.0.0

Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes. If you exclude navbar-expand-* the mobile menu will be used at all widths. Here's a demo of all 6 navbar states: Bootstrap 4 - Navbar Tiers

Also see:
Change bootstrap navbar collapse breakpoint without using LESS

---

Related Topics