Mobile menu / HTML block that contains a pop-form is not scrollable

Hello,

I have added an HTML block that contains a pop-up form inside the mobile menu. But when on mobiles i have opened the form, It is stuck on a specific location and I can not scroll to the bottom of the form. I have added the staging site to the form below. You can see an orange button with the form inside the menu, on mobiles. Also when you close the form, the overlay on the background disappears and the user can not close the menu.

Let me know how this can be solved.

Best Regards

Hello,

Tried to log in: https://take.ms/nthAL but seems that the link is expired. Could you please update it?

Thank you in advance.

Kind Regards

Hello,

Please add the IP of the server. so you can see the proper site? This is on the staging environment. You can not log in because you are trying to access the live site.

Best Regards

Update: I would also like to report a problem with the pop-up element if it is on the footer.

I have added a video link with the problem below. This also happens on the product page where I have also a pop-up to send a form.

Let me know if you need more information

Best Regards

Hello,

Can you give me access to the staging site in this case? Or do you mean that I need to send my IP first?

I await your response.

Kind Regards

I was referring to adding the IP of the server to your host file.

But in the meantime, the site went live.

So I will add the new token and the URL to the staging environment. You do not need to do anything. Just copy and paste the URL.

Best Regards

Hello,

Sorry for the delay.

May I request you show that button again and confirm the permission for plugins deactivation so I can test what is wrong there https://take.ms/EJuMH4 ?

Kind Regards

Hello,

I have enabled the button again on mobiles. You can see it the the underline style.

Feel free to make any changes you like, as this is a staging site.

Best Regards

Hello,

1. Add the below code into the “Global JS” area in Theme Settings -> Custom JS.

(function($) {
	$(document).on('wdOpenPopup', function() {
		$('.wd-opened').removeClass('wd-opened');
		$('.wd-close-side').removeClass('wd-close-side-opened');
	});
})(jQuery);

2. The below code add to the “Global Custom CSS” area in Theme Settings -> Custom CSS.

@media (max-width: 767px) {

	.wd-popup {
		overflow: hidden;
	}
}

After that, in your popup, you need to edit the right column and in the Design options -> Mobile add a negative margin (-20px) as shown in the screenshot: https://prnt.sc/pSdLlTGJYEjl

Kind Regards

Thank you for your feedback. It now works as expected. I just made a change to the media query above, in case someone else will need it.

@media and (max-width: 767px) {
	.wd-popup {
		overflow: hidden;
	}
}

I also noticed another behaviour that the pop-up is doing.

If the popup is open, the user can scroll freely on the page and not only just the content of the pop-up.
I have added a video below to showcase the problem.

Let me know your thoughts.

Best Regards

Hello,

Use the below custom CSS for help:

@media (max-width: 1024px) {
html:has(.mfp-wrap) {
	overflow: hidden;
}

html .mfp-wrap {
	position: fixed !important;
	overflow-y: scroll;
	max-height: 100vh !important;
	top: 0 !important;
	bottom: 0 !important;
}

html .mfp-wrap .wd-popup {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
}

Thank you for your time and have a good day!

Kind Regards

Perfect. All the solutions above worked.

If this seems to be the case for a global update, please consider adding the to future theme updates. I will leave this up to your judgment and insights into the theme.

Thank you for your time on the matter.

You may close the ticket.

Best Regards

Hello,

Always remember that you can reach out to us with any questions you may have.

Wish you all the best.

Kind Regards

[Author]

Posts