title: Bootstrap Navbar with a side bar when viewed in mobile
body: <p>I am using Bootstrap Navbar for my web application and it works fine.
  Using this <a href="https://v4-alpha.getbootstrap.com/components/navbar/" rel="nofollow noreferrer">LINK</a></p>
  
  <p>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.</p>
  
  <p>Something like this <a href="https://i.stack.imgur.com/PccFK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PccFK.png" alt="enter image description here"></a></p>
  
  <p>Where as I want to create a side navbar, by side nav I mean it should display elements like in materialize CSS <a href="http://materializecss.com/navbar.html" rel="nofollow noreferrer">LINK</a></p>
  
  <p><a href="https://i.stack.imgur.com/EMHpN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EMHpN.png" alt="enter image description here"></a></p>
  
  <p>I did a lot of research and got this <a href="https://startbootstrap.com/template-overviews/simple-sidebar/" rel="nofollow noreferrer">https://startbootstrap.com/template-overviews/simple-sidebar/</a></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I cannot go for materialize CSS as the cost of making all the bootstrap changes to materialize is way to much.</p>
  
  <p>And if this is possible using plain CSS it's like icing on cake.</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>here is my nav bar</p>
  
  <pre><code>nav class="navbar navbar-toggleable-md navbar-light bg-faded  navbar-fixed-top"&gt;
    &lt;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"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;a routerLink="/home"&gt;&lt;img src="angular.png" class = "myImage" alt="Image"/&gt;&lt;/a&gt;
    &lt;div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass]="{show : isActive}"&gt;
      &lt;ul class="navbar-nav"&gt;
        &lt;li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown&gt;
          &lt;a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Basic Concepts
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
            &lt;a [routerLink]="['/a4']" class="dropdown-item"&gt;Angular Component&lt;/a&gt;
            &lt;a [routerLink]="['/cli']" class="dropdown-item"&gt;Angular CLI&lt;/a&gt;
            &lt;a [routerLink]="['/inout']" class="dropdown-item"&gt;Event Emitters&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/template']"&gt;Template Driven Forms&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/reactive']"&gt;Reactive Forms&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/directives']"&gt;Angular Custom Directives&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/pipes']"&gt;Custom Pipes&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/viewchild']"&gt;View Child&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/view']"&gt;View Encapsulation&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
        &lt;li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown&gt;
          &lt;a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Advanced Concepts
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1"&gt;
            &lt;a class="dropdown-item" [routerLink]="['/ngrx']"&gt;Angular Redux using ngrx/store&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/guard']"&gt;Angular Guards&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/host']"&gt;Host &amp; Host-Context&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/dynamic']"&gt;Dynamic Component&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
        &lt;li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown&gt;
          &lt;a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Additional
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2"&gt;
            &lt;a class="dropdown-item" [routerLink]="['/charts']"&gt;Angular + HighCharts&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/firebase']"&gt;FireBase Functions&lt;/a&gt;
            &lt;a class="dropdown-item" [routerLink]="['/myworks']"&gt;My Angular Projects&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
        &lt;li class="nav-item" [routerLinkActive]="['active']"&gt;
          &lt;a class="nav-link" [routerLink]="['/comment']"&gt;Comments&lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li class="nav-item" [routerLinkActive]="['active']"&gt;
          &lt;a class="nav-link" [routerLink]="['/faq']"&gt;&lt;strong&gt;F.A.Q&lt;/strong&gt;&lt;/a&gt;
        &lt;/li&gt;
  
        &lt;li class="nav-item" [routerLinkActive]="['active']"&gt;
          &lt;a class="nav-link" (click)="openDialog()"&gt;Contact Card&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>