Menu appears on mobile device on scrolling

Hi There,

Thanks for contacting us.
We checked this with the Responsive theme and can’t find any such issue.
This kind of problem is usually caused by a conflict with another plugin or child theme code.

Thank You

Thank you for your response.

After a lot of searching, I have traced the issue. The problem appears to be in core/includes/customizer/styles.php. You have the following on line 385:

.boxed-layout
.content-area, body.default-layout #content-outer, body.full-width-layout #content-outer, body.full-width-no-box #content-outer, .menu, #footer {
width: {$container_width}px;
max-width: 100%;
}

The layout has a div with id content-outer and the body has the default-layout class. This rule is therefore triggered, setting the div to container_width and forcing the page to (in my case) 960 pixels wide. When you scroll the page the resize event fires, resulting in the code in core/js/responsive-scripts-min.js deciding that the screen is more than responsives.break_point wide and therefore setting the menu to display.

I have fixed the issue by adding custom CSS that sets the width of these elements to 100% if the screen is 959px or less wide (container_width being 960px for my site).

However, I was wrong about the latest version of your theme fixing the disappearing menu. This can still be observed on staging.rhdra.org which is using the Responsive theme. It works fine on PCs and on mobile emulators. However, on an actual mobile device the menu appears when you touch the hamburger but generally disappears when you try to scroll the menu (although sometimes it scrolls correctly). You then have to touch the hamburger twice to get it to reappear, so the site obviously thinks the menu is still present. Any thoughts on how this can be fixed would be much appreciated.

P.S. I know the max-width:100% should override the width when the screen is less than 960px wide but, for some reason, it appears not to work. Having seen what was happening on mobile devices, I found a couple of browsers reporting the div as 960px wide when emulating a mobile device with a much narrower screen.

Note that I have now deactivated all plugins and am not using a child theme on https://staging.rhdra.org so this is purely the Responsive theme. As I say it works fine on mobile emulators but not on actual mobile devices. If you tap on the hamburger the menu opens correctly but it usually disappears as soon as you start to scroll.

As a P.S. to my earlier P.S., I agree that the menu appearing on scrolling was not a Responsive issue. It was caused by something else triggering browsers to ignore the max-width and use the width in the CSS. Strange.

I have been having the same problem: the menu disappears if I scroll.

I am using an iPhone 7, iOS 13.1.3, Safari Browser

Unfortunately, I have a rather large menu structure for my website:
https://ephesians.org

When using the iPhone (and I have had the same report from someone who uses Android) if I expand the menu and then try to scroll down to get to the actual menu item I need, the menu disappears.

This was working a few weeks ago – I have been making some changes to the website and I’m pretty sure it was working the last time I checked.