6

I'm copying code directly from getmdl.io (the component page) and on all devices (multiple PCs, browsers, phones, etc) the hamburger menu is not centered in the header. I can't seem to isolate the menu icon in the css to realign it. All the component code on getmdl.io has the burger icon displayed correctly. Here is an example image. (I don't have enough reputation to directly link to the image.) https://i.stack.imgur.com/4x9Ra.jpg

here is the code in question

http://pastebin.com/Wgdt71Mv

Mike H
  • 109
  • 8
  • Please provide a code sample of what exactly you are running. We have seen this issue a few times before, it has always ended up being an error in the code somewhere and not an MDL problem (since it works perfect in all of our examples and templates.) – Garbee Nov 19 '15 at 06:04
  • I'm having same problem, Created jsbin showing my [code](http://jsbin.com/huqohokaxo/edit?html,output). Here is a [output](http://output.jsbin.com/tuhaharuhi) showing problem. One weird thing happening here is, same code works fine on [Codepen](https://codepen.io/anon/pen/BobVOL) !! Weird :( – Maulik Nov 19 '15 at 07:50
  • Here's the code in question. http://pastebin.com/Wgdt71Mv – Mike H Nov 20 '15 at 06:47

1 Answers1

21

Looks like you need to add the proper HTML5 doctype to your markup to get things working properly. Try adding <!doctype html> to the very top of your HTML. That should fix it.

In addition to the doctype, we did have a slight height bug on the appbar causing it to be about 2px off-center. This has been addressed and will be out in the next release.

Garbee
  • 10,581
  • 5
  • 38
  • 41