overlapping problem with responsive menu

[bastoubach]

Hi,
I am trying to implement a responsive menu.
When the screen size drops below 740px, the menu starts overlapping onto the content below. I actually think that it comes from the fact that the menu area is not expanding, but I haven't been able to figure it out...
Can you help?

[edited by: coopster at 6:10 pm (utc) on Feb 25, 2013]
[edit reason] removed sig, see TOS #13 [webmasterworld.com] [/edit]

[Fotiman]

Welcome to WebmasterWorld!
Note, URLs are not allowed here, so a moderator will probably be along shortly to remove it. With that said, I looked at the site, and the problem appears to be that you have an explicit height set on one of the sections in your header (zone-header). There's no good reason to have the height set on that. Instead remove that height rule (which is the equivalent of height: auto).

You also have a margin-top: -36px on one of the items in your content, which causes a little bit of it to still be covered by the navigation. And you have margin-top of 20px on your h1 which also throws off the alignment (once you remove the -36px margin).

[bastoubach]

Thanks for your suggestions! I will try them.
How do folks get help if you're not allowed urls?

[Fotiman]

You're encouraged to post code examples instead. The reason being that in 2 days, 2 months, 2 years... whatever... someone else might have the same problem and the URL may be useless to solve it at that point. Whereas if the code that caused the problem was posted here instead, they could see what was wrong and how it was fixed.

See the forum charter [webmasterworld.com].

[bastoubach]

Got it! Thanks!
I fixed the problem and will post code from now on...

[Fotiman]

Glad to help :)