Archived topic
Help! My Mobile burger menu covers the content
8 replies · Started by Rene on June 28, 2020

Here's the problem. You can see the menu covering the hero text.
I've tried changing the CSS values, but it only moves it along the line it's already on. The logo was originally covering the text as well, but I moved it to the top right corner manually.
Hi there,
I'm no longer seeing the issue:
https://www.screencast.com/t/Ugv7Xqt5oq
Have you figured out?
Hi Leo,
No solution yet. You can see the menu hovering on the content rather than on the navbar itself. I would like it to align like this: https://imgur.com/a/qXNMm2l
Can you disable the merge option on the header element?
Don't think you need it.
Please also remove your custom CSS temporarily so I can see the issue better.
The screenshot you've linked should be the default mobile header layout without any custom CSS.
Sure. I'll remove the CSS. Where's the merge option? I can't find it in the customize -> menu or navigation
CSS Removed. This is what it looked like originally. 
In Appearance > Elements - edit your Header Element, go to the Site Header tab - there you can disable the Merge with Content.
You still have this CSS in your site Customizer > Additiona CSS:
/* Mobile Navigation Breakpoint */
@media (max-width: 922px) {
.site-logo {
width: 140px;
margin: 0 auto 32px auto !important;
/* margin: 0 12px 32px!important; */
display: block;
}
}
Remove this as its interfering with the logos position.
Perfect! I've been struggling with this for weeks. Thanks for the help David & Leo. Much appreciated.
You're welcome - glad we could be of help