Top Navigation menu obscures page content

[alexbwang]

Hi,

We’re experiencing a strange display issue on mobile view… basically, the top of page content (e.g page title or Global Banner) gets covered by the Navigation Menu on first loading the page. We have tried different combination of theme settings but it doesn’t seem to solve the issue.

Confirmed with Chrome and Safari browser on iOS.

Could you please advise urgently, thank you

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Can you test adding this to Theme Options => Custom CSS:

@media only screen and (max-width: 479px) {
#main-container {
    margin-top: 45px;
}
}

[alexbwang]

Hi, we’ve applied the CSS code you provided, however the site still behaves as before. Tested on iPhone 6, 5, 6S Plus with Chrome iOS and Safari browsers. Please advise urgently, thank you

[David Martin – Support]

Hi,

On this page for example, I see nothing getting covered:

Are you referring to this:

[alexbwang]

Yes, home page global banners are getting covered. Please advise. We’re hoping you could provide a solution that doesn’t involve adding a hard margin to force the contents down. Look forward to hearing from you, cheers

[David Martin – Support]

Sure, this will do it:

#mobile-header-sticky-wrapper {
    min-height: 82px;
}

Also you have a CSS error caused from an unclosed media query.

[alexbwang]

Thank you, problem resolved.

Will you be providing a fix in future update for this?

[Rui Guerreiro – SUPPORT]

Will forward to David so he can reply.

-Rui