on mobile view add black overlay to background

Hi poojakolte7,

Please go to Mega Menu > Menu Themes > Custom Styling and add the following:

@include mobile {
	body.mega-menu-#{$location}-mobile-open {
		#{$wrap} .mega-menu-toggle.mega-menu-open:after {
		  position: fixed;
		  width: 100%;
		  height: 99999px;
		  content: "";
		  top: 0;
		  left: 0;
		  opacity: 0.5;
		  background: black;
		  cursor: pointer;
		  z-index: 9999999998;
		}
		#{$wrap} #{$menu} {
		  position: relative;
		  z-index: 9999999999;
		}
	}
}

Hello,

Thank you for your help.

Above css add overlay to background but content goes down. Menu is not showing on background content.Please check below attached image

View post on imgur.com

Hi poojakolte7,

Please try just this instead:

@include mobile {
	body.mega-menu-#{$location}-mobile-open {
		#{$wrap} .mega-menu-toggle.mega-menu-open:after {
		  position: fixed;
		  width: 100%;
		  height: 99999px;
		  content: "";
		  top: 0;
		  left: 0;
		  opacity: 0.5;
		  background: black;
		  cursor: pointer;
		  z-index: 9999999998;
		}
	}
}

Hello,

Above css works perfectly for android phones but Is is not working on iPhone. Black overlay overlaps menu. Please check attached image.

View post on imgur.com

Hi poojakolte7,

Hmm, I am not sure if we will be able to get this working without the sub menu being relatively positioned (i.e. pushing the page content down).

Can you try changing the z-index in the Above CSS to 9999998?

Failing that, try removing the CSS completely, then go to Appearance > Menus > Max Mega Menu Settings and change the Effect (Mobile) to Slide Left – this will give you a slightly different style of mobile menu (off canvas) but it should also grey out the page background when the mobile menu is open.

Regards,
Tom