Can md-toolbar be fixed top when inside md-sidenav-layout?

Question

Am really struggling here. We're using md-sidenav-layout and finding it impossible to come up with a way to fix the md-toolbar to the top of the page:

|--------------------------------|
|   <------ md-toolbar ------->  |       <- fix this so content scrolls under
|--------------------------------|
|                               ^|
|           scrollable           |
|                               v|
----------------------------------

Because of the way md-sidenav-layout seems to fix itself, adding

style: fixed

to the md-toolbar doesn't fix it - in fact nothing seems to!

Any help appreciated.

Answer 1

Use this:

<md-toolbar color="primary" layout="row" style="position: fixed;">
</md-toolbar>
<md-sidenav-container fullscreen>
</md-sidenav>

css:

.mat-toolbar.mat-primary{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
}

Answer 2

For anyone else struggling with this, the reason why it's difficult is because both md-sidenav-layout and md-sidenav-content both specify

transform: translate3d(0,0,0)

What this does is reset the coordinate system for child elements. This is a known 'issue' or consideration with using transform3d. The alternative we came up with was to site the md-toolbar outside the md-sidenav-layout like this:

<div style="position: fixed; width: 100%">
  <md-toolbar>...</md-toolbar>
</div>
<md-sidenav-layout style="top: 64px !important">...</md-sidenav-layout>

Doing the above gets the required effect of a fixed md-toolbar with a full screen layout.

See this SO for more info on the fixed/translate3d issue: 'transform3d' not working with position: fixed children