Angular 2 Material 2 Top Navigation Bar \ Toolbar

Question

I have a toolbar, but it leaves a space instead of a smooth one at the top of the page.

I would also like it to be sticky, but not yet working on this part, since it doesn't look like my toolbar implementation is a “header”. What am I doing wrong or using the wrong component?

<md-toolbar color="primary">
    <i class="material-icons app-toolbar-menu">menu</i>
    <span class="app-toolbar-filler"></span>
    <md-sidenav>
    </md-sidenav>
</md-toolbar>

Answer 1

Accepted another answer seems to be hacked as your toolbar is not really sitting. Here is the best way to do this.

In styles.cssinstall:

body {
    margin: 0;
}

HTML. , HTML <div> .

Answer 2

md-sidenav-container fullscreen:

<md-sidenav-container fullscreen>
    <md-toolbar color="primary">
        <i class="material-icons app-toolbar-menu">menu</i>
        <span class="app-toolbar-filler"></span>
        <md-sidenav>
        </md-sidenav>
    </md-toolbar>
</md-sidenav-container>

-

:. . .