Mobile menu not functioning correctly - all of menu not appearing on screen

Hi Gabriel,

Not sure if I fully understand.

This is what I'm seeing currently:
https://www.screencast.com/t/M5PHg7N6e

Are you seeing something different?

Hi Leo,
Yes that's what I'm seeing as well. The problem is the menu has other items above it that aren't appearing on my screen or on your screencast.
Thanks,
Gabe

Have you tried removing your custom CSS to test if any of them is causing the issue?

I need help with this. It's not working. I tried removing the custom CSS and that didn't do anything.
Site login details are below in private information.

new password for that user account for you in private information

This is very unlikely a GP issue - we haven't received any other reports on this.

Can you remove all custom CSS temporarily and let me have a look?

Make sure to clear the caching plugin after if you are using any.

I don't need backend access yet.

I'm not using any custom CSS or a caching plugin. This is the code that's in the Additional CSS section of the Customizer:

/* GeneratePress Site CSS */ /* Navigation padding */

.main-navigation .inside-navigation .main-nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 99;
}

.main-navigation .inside-navigation {
padding: 10px;
}

/* Center main nav */

@media (min-width: 1300px) {
.main-navigation .inside-navigation .main-nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}

/* Box shadow */
.box-shadow {
box-shadow: 2px 2px 10px -2px rgba(0,0,0,0.3);
}

/* FAQ accordion */
.gb-inside-container .lightweight-accordion summary {
background: none;
}

.gb-inside-container .lightweight-accordion summary span,
.gb-inside-container .lightweight-accordion summary::marker {
font-size: 20px;
}

.gb-inside-container .lightweight-accordion summary span {
font-weight: 700;
} /* End GeneratePress Site CSS */

Hi there,

this is the CSS that's causing the issue:

.main-navigation .inside-navigation .main-nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 99;
}

Delete that

So how do I make it work for mobile then?

You just need to delete that CSS for your Customizer > Additional CSS

Thanks David!

You're welcome