md-sidenav toggle() is on top of the md-toolbar

I also had the same problem and @William S's solution didn't work for me. SideNav won't show properly if it has relative position. i got it working by putting SideNav and Content in a <md-content flex></md-content>:

<md-toolbar>
    <div class="md-toolbar-tools">
        <md-button class="md-icon-button" ng-click="openLeftMenu()">Menu</md-button>
    </div>
</md-toolbar>

<md-content flex>
    <md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" layout="column">
        <md-list>
            <md-list-item>

                <md-item-content md-ink-ripple>
                    <div class="inset">Item 1</div>
                </md-item-content>

            </md-list-item>
        </md-list>
    </md-sidenav>

    <md-content>Content</md-content>
</md-content>

Small Update: Please note that this answer is for Angular Material 0.10.1. As Angular Material is still very young, this solution may not work forever, or will become redundant.

For making the top bar overlap the sidenav, you have to give it a higher z-index than the sidenav (anything over z-index: 60 will do)

HTML

  <md-toolbar layout="column" class="main-toolbar md-medium-tall">
    <span flex="flex">
      <h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
    </span>
  </md-toolbar>

CSS

.main-toolbar {
  /* Put top toolbar on a higher layer than sidenav, which has z-index: 60 */
  z-index: 61;

  /* Cosmetic */
  background-color: green;
}

This however will make the top part of the right sidenav to be overlapped, which might not be what you'd want.

For making the sidenav appear below the top bar, you need to change it from absolute positioning to relative, and change display type to block.

For this, you'll have to override some CSS of the sidenav element, and put the right sidenav within a div that follows layout="row".

HTML

<div layout="row">
    <!-- your sidenav -->
</div>

CSS

.md-sidenav-right {
  /* Cosmetic, show where the fill starts */
  background-color: pink;

  /* Override from absolute to relative */
  position: relative;

  /* Change to block display */
  display: block;
}

Here is a codepen utilizing both changes above. Base code taken from the angular-material demo, version 0.10.1.

http://codepen.io/qvazzler/pen/mJGrya