Mobile Menu Scroll Issue (main site is scrolling behind it)

[doughballs]

Hi. Please check the link on the secure note and view on mobile. We have two menus, left and right (red and blue). the left (red) menu, if you open it and scroll to the bottom, the main site starts to scroll behind it, and looks/feels clunky. We’d need the site to not scroll while the mobile menus are open. The same happens for the right (blue) menu. I am using iPhone Xr.

[nabeel]

Hi @doughballs,

Thank you for reaching out to us. This can be done with custom scripting, first add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$(".x-masthead .x-anchor-toggle").click(function() {
		var self = this;
		setTimeout(function(){ 
			if( $(self).hasClass('x-active') ) {
				$('html').addClass('hide-scrollbar');
			}
			else {
				$('html').removeClass('hide-scrollbar');
			}

		}, 50);
		
	})
});

Then add the following code in the Theme Options > CSS:

.hide-scrollbar {
	overflow-y: hidden !important;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[doughballs]

Hi. This hasn’t worked. The navbar just flies off the top of the screen when you reach the end of the mobile menu.

[christopher]

Hi @doughballs,

I checked your website with iPhone XR and I see the problem that you are describing. I checked the case on my local installation and the problem is not there. I used a simple Navigation Off-Canvas element without any extra settings and it is working correctly. This shows that there is a setting here and there on your installation that is causing the problem.

I am not sure at the moment what can be the problem cause, but a temporary solution is to increase the z-index property of the main Off-Canvas portion of the element. Please click the Customize tab of the element and click the Element CSS feature and add the code below:

$el.x-off-canvas {
z-index: 9999;
}

To learn more about the Element CSS feature and how it works please click here.

Thank you.