how to collapse navbar in bootstrap 4

Question

can I make a collapsed navbar in my code, because if I open in mobile the navbar cannot be collapsed to make one? I've tried to make a button and make it false but the navbar does not show on desktop or on mobile. this the code that I make to show a navbar

<nav class="navbar navbar-default navbar-cls-top navbar-expand-sm "  role="navigation">
                    <div class="navbar-header">
                        <a class="navbar-brand">AREZOU Intrade</a>
                       <button class="navbar-toggler bg-white" type="button" data-toggle="collapse" data-target=".dual-collapse" aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
  </button>
</div>
  <div class="navbar-collapse dual-collapse collapse">

                         <ul class="navbar-nav d-sm-none">
     <li  class="nav-item">
      <a class="nav-link active-menu ukuran"  href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle ukuran"  id="navbardrop" data-toggle="dropdown"><i class="fas fa-chart-line"></i> Quality</a>
      <div class="dropdown-menu">
        <a href="?hal=quality1" class="dropdown-item ukuran2">Quality 1</a>
        <a href="?hal=pemborong" class="dropdown-item ukuran2">Pemborong</a>
        <a href="?hal=quality2" class="dropdown-item ukuran2">Quality 2</a>             
      </div>
    </li>

    <li  class="nav-item">
      <a class="nav-link active-menu ukuran"  href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a>
    </li>
  </ul>
    </div>

How about this: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_collapse — Akber Iqbal, Dec 31 '19 at 03:17
Refer and resize the window, Bootstrap Navigation bar https://getbootstrap.com/docs/4.4/examples/navbars/ — Akshay Bawane, Dec 31 '19 at 04:55
Try this https://stackoverflow.com/questions/42401606/how-to-hide-collapsible-bootstrap-4-navbar-on-click — Lokesh Suman, Dec 31 '19 at 07:33

score 0 · Accepted Answer · answered Dec 31 '19 at 07:31

The bootstrap class d-sm-none means that the element will be set to display: none on small breakpoint and up. This is why the navigation does not display on desktop. Remove this class from the <ul> element.

Additionally, the responsive functionality you're talking about doesn't work with Bootstrap alone. You need to also include the javascript files below. This is explained on the Bootstrap documentation.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Finally, your example is missing a closing </nav> tag.

Here is a codepen showing your code working after resolving the issues outlined above.

how to collapse navbar in bootstrap 4

1 Answers1