Mobile-friendly Bootstrap 4 Side Navbar With jQuery And CSS

A Bootstrap 4 extension that collapses the sidebar menu into a top hamburger navigation when the screen size reaches a breakpoint defined in the CSS media queries (768px).

Based on the Simple Sidebar Bootstrap template. jQuery is used only to hide the opened hamburger navigation after you click the menu item.

How to use it:

1. Load the needed jQuery and Bootstrap 4 framework in the html.

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. Load the stylesheet bootstrap_sidebar_to_top.css in the head section.

<link rel="stylesheet" href="css/bootstrap_sidebar_to_top.css">

3. Create the HTML for the sidebar menu.

<div class="d-flex" id="wrapper">

  <!-- Sidebar -->
  <div class="bg-light border-right" id="sidebar-wrapper">
    <div class="sidebar-heading">jQueryScript</div>
    <div class="list-group list-group-flush">
      <a href="#first" class="list-group-item list-group-item-action bg-light">First</a>
      <a href="#second" class="list-group-item list-group-item-action bg-light">Second</a>
      <a href="#third" class="list-group-item list-group-item-action bg-light">Third</a>
    </div>
  </div>
  <!-- /#sidebar-wrapper -->

  <!-- Page Content -->
  <div id="page-content-wrapper">

    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light border-bottom d-md-none">
      <a class="navbar-brand">jQuery</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#first">First<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#second">Second</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#third">Third</a>
          </li>
        </ul>
      </div>
    </nav>

</div>

4. The needed jQuery script to hide the top navbar when a menu item is clicked.

$('.navbar-collapse a').click(function(){
  $(".navbar-collapse").collapse('hide');
});

5. Override the default breakpoint in the bootstrap_sidebar_to_top.css.

@media (max-width: 768px) {
  #page-content-wrapper {
    margin-top: 45px;
  }
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    margin-left: 250px;
    min-width: 0;
    width: 100%;
  }
}

---

This awesome jQuery plugin is developed by MrBeean. For more Advanced Usages, please check the demo page or visit the official website.