Bootstrap Navbar with a side bar when viewed in mobile

Question

I am using Bootstrap Navbar for my web application and it works fine. Using this LINK

It is also responsive and that what I need but as you know the bootstrap navbar changes to hamburger icon when screen size reduces and changes to a drop down.

Something like this

Where as I want to create a side navbar, by side nav I mean it should display elements like in materialize CSS LINK

I did a lot of research and got this https://startbootstrap.com/template-overviews/simple-sidebar/

But here there is not navbar up top it's just a side navbar where as I want this feature when the screen size reduces to mobile.

Also, my bootstrap navbar menu has drop downs so I don't know how to handle that in side nav CSS. Please help I am a novice in CSS.

I cannot go for materialize CSS as the cost of making all the bootstrap changes to materialize is way to much.

And if this is possible using plain CSS it's like icing on cake.

Thanks in advance.

UPDATE

here is my nav bar

nav class="navbar navbar-toggleable-md navbar-light bg-faded  navbar-fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" (click)="isActive = !isActive">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a routerLink="/home"><img src="angular.png" class = "myImage" alt="Image"/></a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass]="{show : isActive}">
    <ul class="navbar-nav">
      <li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Basic Concepts
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a [routerLink]="['/a4']" class="dropdown-item">Angular Component</a>
          <a [routerLink]="['/cli']" class="dropdown-item">Angular CLI</a>
          <a [routerLink]="['/inout']" class="dropdown-item">Event Emitters</a>
          <a class="dropdown-item" [routerLink]="['/template']">Template Driven Forms</a>
          <a class="dropdown-item" [routerLink]="['/reactive']">Reactive Forms</a>
          <a class="dropdown-item" [routerLink]="['/directives']">Angular Custom Directives</a>
          <a class="dropdown-item" [routerLink]="['/pipes']">Custom Pipes</a>
          <a class="dropdown-item" [routerLink]="['/viewchild']">View Child</a>
          <a class="dropdown-item" [routerLink]="['/view']">View Encapsulation</a>
        </div>
      </li>

      <li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Advanced Concepts
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
          <a class="dropdown-item" [routerLink]="['/ngrx']">Angular Redux using ngrx/store</a>
          <a class="dropdown-item" [routerLink]="['/guard']">Angular Guards</a>
          <a class="dropdown-item" [routerLink]="['/host']">Host & Host-Context</a>
          <a class="dropdown-item" [routerLink]="['/dynamic']">Dynamic Component</a>
        </div>
      </li>

      <li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Additional
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
          <a class="dropdown-item" [routerLink]="['/charts']">Angular + HighCharts</a>
          <a class="dropdown-item" [routerLink]="['/firebase']">FireBase Functions</a>
          <a class="dropdown-item" [routerLink]="['/myworks']">My Angular Projects</a>
        </div>
      </li>

      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" [routerLink]="['/comment']">Comments</a>
      </li>

      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" [routerLink]="['/faq']"><strong>F.A.Q</strong></a>
      </li>

      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" (click)="openDialog()">Contact Card</a>
      </li>

    </ul>
  </div>
</nav>

Answer 1

If am not wrong, you want to achieve "sliding menu" for mobile using bootstrap. Here is a snippet you can use to achieve the purpose:

Reference link: https://bootsnipp.com/snippets/featured/navbar-lateral-slide-menu

Example HTML:

<header role="banner" class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        </div>
        <div class="navbar-inverse side-collapse in">
          <nav role="navigation" class="navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#Home">Home</a></li>
              <li><a href="#users">Users</a></li>
              <li><a href="http://placesforlove.com">Places</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <div class="container side-collapse-container">
      <div class="row">
        <h1>Hello</h1>
        <p>This is a side opening nav demonstration</p>
        <p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>
      </div>
    </div>

CSS:

body {
          padding-top: 50px;
          position: relative;
      }

      pre {
          tab-size: 8;
      }

      @media screen and (max-width: 768px) {
          .side-collapse-container{
              width:100%;
              position:relative;
              left:0;
              transition:left .4s;
          }
          .side-collapse-container.out{
              left:200px;
          }
          .side-collapse {
              top:50px;
              bottom:0;
              left:0;
              width:200px;
              position:fixed;
              overflow:hidden;
              transition:width .4s;
          }
          .side-collapse.in {
              width:0;
          }
      }

JS:

$(document).ready(function() {   
            var sideslider = $('[data-toggle=collapse-side]');
            var sel = sideslider.attr('data-target');
            var sel2 = sideslider.attr('data-target-2');
            sideslider.click(function(event){
                $(sel).toggleClass('in');
                $(sel2).toggleClass('out');
            });
        });

Answer 2

Pls. see

https://jsfiddle.net/fido3993/fk63zzbz/3/

I see on above comment

HTML

<!-- Navigation -->
      <div class="navbar navbar-default navbar-inverse" role="navigation">
          <div class="navbar-header">

              <button type="button" class="navbar-toggle">
                  <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" href="#">
                  <div class="logo">
                    <img src="images/logo_white.png" class="logo" alt="logo"/>
                  </div>
              </a>

          </div>

              <div class="navbar-collapse">
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="#" class="active">Home</a></li>
                      <li><a href="#">Work</a></li>
                      <li><a href="#">Course</a></li>
                      <li><a href="#">Contact</a></li>
                  </ul>
              </div>

      </div>
      <!-- End Navigation-->

CSS

.indexcity {
  z-index: 9999;
}

.right {
    right: 0 !important;
    left: 0 !important;
}

@media only screen and (max-width: 767px) {
    .navbar-collapse{
      background-color:#ffc107;
      position: fixed;
      top: 0;
      transition:all 0.8s ease-out;
      height: 100%;
      width: 100%;
      left: 700px;
    }
    .navbar-inverse .navbar-nav>li>a {
    color: #000;
    }
}

JQUERY

jQuery(function($){
    $('.navbar-toggle').click(function(){
    $('.navbar-collapse').toggleClass('right');
    $('.navbar-toggle').toggleClass('indexcity');
    });
});