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>