Angular 2 Material 2 top navbar\toolbar

Question

I have the toolbar working but it leaves a gap around instead of smooth at the top of the page.

Also I would like it to be sticky but have not yet worked on that part since it doesn't look like my toolbar implementation is a "header". What am I doing wrong or am I 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

The accepted other answer seems kind of hacky, since your toolbar isn't really a sidenav. Here's a better way to do it.

In styles.css, set:

body {
    margin: 0;
}

However, this also gets rid of the margins for the rest of the HTML. If you do not want this, wrap the rest of the HTML in a <div> and add a margin to that.

Answer 2

Simply place your code inside a md-sidenav-container element and add an attribute 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>

Plunker Demo

UPDATE: You should use the answer above mine. It doesn't require a sidenav.