title: Angular Material fixed side bar header not a fixed
body: <p>Im tried to crate <a href="https://material.angular.io/components/sidenav/overview" rel="nofollow noreferrer">Angular material Fixed side nav</a> , but I face some conflict on my projects, My issue is side bar header not fixed, i added content details and scrolls the content  then header is hide,</p>
  
  <p><strong><a href="https://stackblitz.com/edit/angular-khnxwz" rel="nofollow noreferrer">Stack blitz code here</a></strong> </p>
  
  <p>how can I fix this issue
  please help me to fix this one</p>
  
  <p>Thanks.</p>
  
  <p><strong>My code</strong></p>
  
  <p><strong>sidenav-fixed-example.html</strong></p>
  
  <pre><code> &lt;mat-toolbar class="example-header"&gt;Header&lt;/mat-toolbar&gt;
  
    &lt;mat-sidenav-container class="example-container"&gt;
      &lt;mat-sidenav #sidenav mode="side" opened class="example-sidenav"&gt;
      &lt;mat-nav-list&gt;
        &lt;!-- Sidebar --&gt;
        &lt;ul class="sidebar navbar-nav" &gt;
          &lt;div class=" fixed-search " &gt;
            &lt;div class="sidebar-date-and-time"&gt;
  
  
        &lt;span class="side-mnu" routerLink='/home'&gt;
          &lt;div class="d-flex flex-row bd-highlight mb-3"&gt;
           &lt;div class="p-2 bd-highlight"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;/div&gt;
             &lt;div class="p-2 bd-highlight txt-sm"&gt;Home&lt;/div&gt;
                &lt;/div&gt;
                   &lt;/span&gt;
  
  
              &lt;span class="side-mnu-active"  routerLink='/categories'&gt;
          &lt;div class="d-flex flex-row bd-highlight mb-3"&gt;
           &lt;div class="p-2 bd-highlight"&gt;&lt;i class="fas fa-clipboard-list"&gt;&lt;/i&gt;&lt;/div&gt;
             &lt;div class="p-2 bd-highlight txt-sm"&gt;Categories&lt;/div&gt;
                &lt;/div&gt;
                   &lt;/span&gt;
  
  
  
              &lt;span class="side-mnu" routerLink='/customerdetails'&gt;
          &lt;div class="d-flex flex-row bd-highlight mb-3"&gt;
           &lt;div class="p-2 bd-highlight"&gt;&lt;i class="fas fa-users"&gt;&lt;/i&gt;&lt;/div&gt;
             &lt;div class="p-2 bd-highlight txt-sm "&gt;Customers&lt;/div&gt;
                &lt;/div&gt;
                   &lt;/span&gt;
  
  
              &lt;span class="side-mnu" routerLink='/orderdetails'&gt;
          &lt;div class="d-flex flex-row bd-highlight mb-3"&gt;
           &lt;div class="p-2 bd-highlight"&gt;&lt;i class="fas fa-shopping-bag"&gt;&lt;/i&gt;&lt;/div&gt;
             &lt;div class="p-2 bd-highlight txt-sm"&gt;Orders&lt;/div&gt;
                &lt;/div&gt;
                   &lt;/span&gt;
  
  
  
  
              &lt;span class="side-mnu"&gt;
          &lt;div class="d-flex flex-row bd-highlight mb-3"&gt;
           &lt;div class="p-2 bd-highlight"&gt;&lt;i class="fas fa-clipboard-check"&gt;&lt;/i&gt;&lt;/div&gt;
             &lt;div class="p-2 bd-highlight txt-sm"&gt;Sales Items&lt;/div&gt;
                &lt;/div&gt;
                   &lt;/span&gt;
  
  
  
  
              &lt;span class="side-mnu"&gt;
          &lt;div class="d-flex flex-row bd-highlight mb-3"&gt;
           &lt;div class="p-2 bd-highlight"&gt;&lt;i class="fas fa-bullhorn"&gt;&lt;/i&gt;&lt;/div&gt;
             &lt;div class="p-2 bd-highlight txt-sm"&gt;Announcements&lt;/div&gt;
                &lt;/div&gt;
                   &lt;/span&gt;
  
            &lt;/div&gt;
  
  
          &lt;/div&gt;
          &lt;!--side bar--&gt;
  
        &lt;/ul&gt;
  
      &lt;/mat-nav-list&gt;
      &lt;/mat-sidenav&gt;
  
      &lt;mat-sidenav-content &gt;
  
       Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.Sprint from Zero to App
  Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop.
      &lt;/mat-sidenav-content&gt;
    &lt;/mat-sidenav-container&gt;
  
    &lt;mat-toolbar class="example-footer"&gt;Footer&lt;/mat-toolbar&gt;
  </code></pre>
  
  <p><strong>.css</strong></p>
  
  <pre><code>.example-container {
    position: absolute;
    top: 60px;
    bottom: 60px; height: 100%;
    left: 0;
    right: 0;
  }
  
  .example-sidenav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    background: rgba(255, 0, 0, 0.5);
  }
  
  .example-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  
  .example-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  </code></pre>