Search code examples
htmlcssnavbarhamburger-menubootstrap5-modal

Bootstrap Navbar collapsing at custom width with showing 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 !

Solution

  • If you give lg , sm, xs or xl after navbar-expand class navbar expands automatically by it's custom value. For example if you write navbar-expand-lg value to the nav class it collapses at 992px width or if you give navbar-expand-md it collapses at 768px. You can inspect codes below . I hope it works for you.

    button.navbar-toggler {
  background-color: white;
}

span.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(41,41,41, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>
    <title>Bootstrap</title>
</head>

<body>
    <nav style="background-color: black;" class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="#">Logo Example</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ml-auto">
                <a class="nav-link" href="#">AAA</a>
                <a class="nav-link" href="#">BBB</a>
                <a class="nav-link" href="#">CCC</a>
            </div>
        </div>
    </nav>
</body>

</html>