[Resolved] Z-Index & Mobile Menu

[Phil]

When responsive, the main content is overlapping the mobile menu by 20 pixels or so. I’ve tried every variation I could conceive to properly identify where to apply a higher (or lower) z-index to make the main content underlap the mobile menu, but I can’t seem to identify it.

Do you know what the correct CSS would be to increase the mobile menu z-index?

Thanks!

[Leo]

Hi there,

Change this CSS you’ve added:

.site-main {
    margin-top: -20px !important;
}

To desktop only:

@media (min-width:769px) {
    .site-main {
        margin-top: -20px;
    }
}

[Phil]

Thank you! I expected it was a problem I’d created, and you solved it perfectly!

[Leo]

No problem 🙂

[Author]

Posts