Bootstrap - Navbar collapsing at custom width with showing ~HamBurger~ icon

Can I customize following breakpoint using bootstrap ?

Code :-

<nav class="navbar navbar-expand-lg" style="background-color:#1B202C;">
  <a class="navbar-brand" href="#"><img style="margin-left: 15px; margin-top: -20px;" class="logo" src="assets/logo.png" alt="logo"></a>
  <button  class="navbar-toggler" data-toggle="collapse"  data-target="#collapsedNavBar"><span class="navbar-toggler-icon"></span></button>
  <div class="fixed-nav">
    <ul class="navbar-nav ">
      <li id="nav-1" class="nav-item ">
        <a class="nav-link" href="#">AAAAA</a>
      </li>
      <li id="nav-2" class="nav-item">
        <a class="nav-link" href="#">BBBBB</a>
      </li>
      <li id="nav-3" class="nav-item">
        <a class="nav-link" href="#">CCCCC</a>
      </li>
    </ul>
  </div>
</nav>

But when I override this by adding,

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

to its style.css. Then navbar collapses at my custom breakpoint (1072px). But still hamburger icon appears when it reaches to -lg (≥992px) . So I need to know is, is there any method to collapse at custom width also appearing the hamburger icon.

Thanks !

from Recent Questions - Stack Overflow https://ift.tt/WmldCh7
https://ift.tt/ln6XjYu