Menu is responsive now

[endverbraucher]

This should work better this Time. Menu should react responsive now without breaking the layout.

• all menu related css is moved to a separate module
• the header should only be fixed positioned on large screens, otherwise the menu is not scrollable on mobile devices
• mobile menu items does have a grey background now.

Can somebody check and merge this, please?

[raucao]

I think it's not 100% there yet. The flame is too small, the margin underneath it too large, and the margin on top of the menu icon is unnecessary, or it should be both on top and bottom of it.

Want to improve it a bit more before merging?

Oh, and on large screens the whole menu now has a weird padding on the bottom, by the way.

[endverbraucher]

Yeah, you’re right, this is not where it should be. I’ll try to improve these things before merging. Thanks for testing!

[endverbraucher]

I worked on the problems you’ve pointed to, and did made some other improvements:

• increased the size of the flame for mobile; may be we should integrate the flame as bg-image via css instead of the img tag, so we can add an hd-version. currently it looks on mobile a little bit unsharp.
• fixed the margins and paddings of the flame and the menu icon, so it should look well balanced now.
• removed the weird bottom-padding from menu on larger screens
• limited the width of the hero-headings to remove a right padding over the complete page on mobile

I replaced the background of the menu items with a thin border; the variant with the background looked a little bit curious to me in combination with the menu icon. But I’m not sure, if I’m wrong on this, I can change this back.

I tested this on smaller browser sizes and on my iPhone. So if this still looks somewhere crazy, tell me!

[jhilden]

Merged this. If there are still issues, we can fix them in the main branch