[mdl-layout__header--waterfall] Block the burger's apparition for small screen

Hi guys,

I was using one of your example, the [portfolio template](https://getmdl.io/templates/portfolio/index.html). So I wanted to re-use the header, with the navigation and the burger for small screen. I started to play a little bit with it, but I didn't manage to see the burger when I reduced the screen size. In my Web console I got "Uncaught TypeError: Cannot read property 'addEventListener' of undefined".
After some trials, removing piece by piece the elements or the mdl classes I found out the error appears when I use the "mdl-layout__header--waterfall" class.

I'm using the hosted version1.2.1 of MDL, and I got the error on Google Chrome 53, and Firefox 49.0.
My OS is Linux, Ubuntu 16.04.

Here is a [codepen](http://codepen.io/SBackUp/pen/XjVvjG) to have the error.

After removing the class "mdl-layout__header--waterfall" the error dissapeared and the burger is back in business.
Thank you for your attention :)