I used the example provided here to set up a responsive navbar
https://theinfogrid.com/tech/developers/angular/responsive-navbar-angular-flex-layout/
and my code looks pretty similar
<div style="height: 85vh;">
<mat-toolbar color="primary" mat-scroll-shrink>
<span>{{title}}</span>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<a href="#" mat-button>Home</a>
<a href="#" mat-button>About</a>
<a href="#" mat-button>Services</a>
<a href="#" mat-button>Portfolio</a>
<a href="#" mat-button>Start</a>
<a href="#" mat-button>FAQ</a>
<a href="#" mat-button>Blog</a>
<a href="#" mat-button>Contact</a>
</div>
<div fxShow="true" fxHide.gt-sm="true">
<a href="#" (click)="sidenav.open()">Show Side Menu</a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav #sidenav fxLayout="column">
<div fxLayout="column">
<a (click)="sidenav.close()" href="#" mat-button>Close</a>
<a href="#" mat-button>Home</a>
<a href="#" mat-button>About</a>
<a href="#" mat-button>Services</a>
<a href="#" mat-button>Portfolio</a>
<a href="#" mat-button>Start</a>
<a href="#" mat-button>FAQ</a>
<a href="#" mat-button>Blog</a>
<a href="#" mat-button>Contact</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
What I would like to have happen is have the mat-toolbar shrink as I scroll down, which is common in a lot of sites, such as this one:
I won't post the rest of the angular 5 code, just follow the example to re-create - its pretty quick.
I've looked at the materials website here
https://material.angular.io/components/toolbar/overview
but there's not much explanation on how to add to it, and I'm pretty new to this stuff. Does anyone know how I might customise this to make the toolbar shrink, based on scrolling?