title: Responsive Nav bar overlapping on content in angular
body: <p>I have <code>nav</code> like below</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-sm navbar-light navbar-fixed-top "&gt;
      &lt;!-- &lt;a class="navbar-brand" href="#"&gt;&lt;/a&gt; --&gt;
      &lt;button class="navbar-toggler" (click)="collapse=!collapse" type="button" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span #tasknote class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class="navbar-collapse" (click)="collapse=true" [hidden]="collapse"&gt;
          &lt;ul class="navbar-nav mr-auto sub-menu dl-submenu"&gt;
              &lt;li class="nav-item menu-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item menu-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item menu-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;first&lt;/a&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and remaining content section like below</p>
  
  <pre><code>&lt;div&gt;
  //some content here
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on <code>Navabar-toggler</code> it overlapping on content in responsive. 
  How we can rectify in angular 4 project </p>