title: How can i set Toolbar to fixed position using angular material design?
body: <p>How can i fix toolbar position to fixed using angular material? i am tried with position fixed but it not worked for me.Can please suggest how can i do this.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div fxLayout="row" fxLayoutAlign="space-between" class="fixed-header header-shadow" style="width:100%;position:relative"&gt;
    &lt;mat-toolbar   color="primary" fxFlexFill role="banner" class="header-style header-shadow"&gt;
      &lt;mat-toolbar-row&gt;
        &lt;div&gt;
            &lt;a  mat-button  routerLink="#"  routerLinkActive="active" (click)="opened=!opened"&gt;&lt;mat-icon class="mat-icon-rtl-mirror mat-icon notranslate mat-icon-no-color ng-star-inserted" role="img"&gt;menu&lt;/mat-icon&gt;&lt;/a&gt;
            &lt;a  mat-button  routerLink="#"  routerLinkActive="active"&gt;{{application_title}}&lt;/a&gt;
        &lt;/div&gt;
        &lt;div fxShow="true" fxHide.lt-md="true" class="example-fill-remaining-space"&gt;
  
            &lt;a  mat-button  routerLink="/customer-list"  routerLinkActive="active"&gt;Customers&lt;/a&gt;
            &lt;a  mat-button  routerLink="/customer-create"&gt;Create Customer&lt;/a&gt;
            &lt;a  mat-button  routerLink="/login"&gt;Login&lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;a  mat-button  routerLink="#"  routerLinkActive="active"&gt;&lt;mat-icon&gt;notifications&lt;/mat-icon&gt;&lt;/a&gt;
            &lt;a  mat-button  routerLink="#"  routerLinkActive="active" fxShow="true" fxHide.lt-md="true"&gt;Prem Kuma Pallinti&lt;/a&gt;
            &lt;a  mat-button  routerLink="#"  routerLinkActive="active" fxShow="true" fxHide.lt-md="true"&gt;&lt;img aria-hidden="true" src="C:/Users/Prem/Desktop/FinalApp/images/man-avater.png"&gt;&lt;/a&gt;
            &lt;a  mat-button  routerLink="/login"&gt;&lt;mat-icon class="mat-icon-rtl-mirror mat-icon notranslate mat-icon-no-color ng-star-inserted" role="img"&gt;more_vert&lt;/mat-icon&gt;&lt;/a&gt;
        &lt;/div&gt;
  
      &lt;/mat-toolbar-row&gt;
  
  
      &lt;/mat-toolbar&gt;
      &lt;main&gt;
      &lt;router-outlet  style="margin-top: 80px;"&gt;&lt;/router-outlet&gt;
      &lt;/main&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/wclff.png" rel="nofollow noreferrer">code <img src="https://i.stack.imgur.com/wclff.png" alt="code "></a></p>