Fixed mobile menu alignment

[felixsanz]

The mobile menu button appears in a place it shoulnd't on Chrome (at least using the Desktop version with a small viewport).

That margin is the cause. Also, to let the logo be center aligned the best way is to absolute positioning the menu button and take it out of flow.

[jsf-clabot]

All committers have signed the CLA.

[themre]

yesterday I also noticed this, you got ahead of me :) I tested it and looks god, but it's up to the others to also look.

[skipjack]

This is actually pretty similar to how we had it before, but a bug on iOS with the absolute positioning caused us to go back to the negative margin (which I agree is a bit hacky).

@felixsanz would you be able to share a quick screenshot of what this fixes?

@SpaceK33z if you have time could you test this out, particularly on an iOS device? If not, I should have time this weekend.

[felixsanz]

@skipjack Take a look at the menu, it's almost off-screen. The absolute positioning fix it.

[skipjack]

@SpaceK33z testing this now, if it looks ok on my iOS device I'm fine with merging.

[skipjack]

Ok it looks a bit off-center vertically, especially on iOS, which was the same problem I was having before with position:absolute on that element. It seems maybe changing the line-height of the icon will fix it.

[skipjack]

As you can see below it's a little off, but maybe this isn't such a big deal. I spent a little time trying to find a fix with no luck. I'm fine with merging and dealing with this later I guess, what do you think @SpaceK33z?

[SpaceK33z]

Sure, this is an improvement. @felixsanz, thanks!

[felixsanz]

Since it's absolute positioned i think line-height will not fix it. Just add a top property with a few pixels, like top: 3px;. BUUUT... on android it looks fine now, so that top will break alignment