Menu in Mobile View Issues

Hi there,

1. Try reducing the Mobile Padding on the Customizer > Layout > Header.

2. That looks like a z-index issue. Can you select the Container that has the image within it, and check its z-index values are 0

Hi David,

1. Changed the padding on the mobile screen and it appears ok on the preview screen, but the actual site still has the full-screen padding. See screenshot.

2. They are set to 0 but looks like the issue is the menu is transparent. If I add background colour, then it shows up in the full-screen mode as well. Any way around it?

Hi there,

Any chance you can link us to the site in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Hi Leo,

Website home page with light background.

Another page with dark background.

Were you looking for login credentials?

First the padding - you have this CSS in your Child theme style sheet:

.inside-header {
  padding: 40px 64px 40px 64px;
}

Which is overriding the customizer CSS.

The color background is because the Customizer > Colors > Primary Navigation background is transparent. You can change that to a solid color of if you only want to change it on mobile use some CSS:

@media(max-width: 768px) {
    .has-inline-mobile-toggle #site-navigation.toggled {
        background-color: #fff !important;
    }
}

Didn't realize the duplicated in the Child theme CSS. Thanks for catching that. it's fixed now.

I guess there's no way around it without some CSS changes. I thought it could be possible with the elements for enabling dark background that I could adjust the colours accordingly for mobile view also.

It's all fixed now. Thank you!

Yeah theres no responsive color options at the moment - they can get very messy very quickly.

Glad to be of help!