"/#toggle" Freezing up entire page

[Glasseye]

Hi Themeco Support,

I have a strange issue where an element is locking up an entire page and the user cannot interact with any of the items and navigation on the page.

The page in question is https://www.petersguesthouse.co.za/rooms/

When the page elements become unresponsive you will notice the mouse cursor changing to the link/hand icon as if there’s a large clickable element that has been overlayed on the entire page. When you then click anywhere on the page you will notice that the URL changes to include “/#toggle” at the end of the URL.

The effect is intermittent and I cannot pinpoint what triggers it. I am using a number of content area modals on that page, but I’ve never experienced this issue with the Content Area Modal element before.

Are you able to help find the cause of this issue and how it can be fixed?

Best regards,

[tristup]

Hi @Glasseye,

Thanks for reaching out.
It seems that modals are rendering above the content, but it can’t be shown as the visibility of those modals are hidden. So when you are clicking into the Menu Items, actually you are clicking into the invisible modals.
It mostly happens due to the broken HTML, I would suggest you delete the modal, one by one till the issue is fixed, and the last one you have deleted before the fix is the cause of the issue.
If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Glasseye]

Thanks for your feedback Tristup.

After doing the test of deleting the content modals one by one, it became clear that all of the modals are problematic. Only after deleting every single modal did the issue go away.

I then did further testing by adding a new content area modal with the stock template settings and the problem did not occur again. So I recreated the style of the modals as they appear on the site and it turned out that the problem only manifested when I added the Slider Revolution shortcode to the Modal contents.

So there’s a conflict between Slider Revolution and the Content Area Modal. It worked perfectly in the past but over the last few theme, plugin or WP core updates something has gone wrong.

I will provide the login credentials in a secure note so that you can have a closer look.

Thanks

[prakash_s]

Hello @Glasseye,

It seems that Slider Revolution is not working inside the Content Modal Area, It would be best if you could copying your live website to your staging area. and send your details in a secure note so that we can investigate your setting without breaking your live site. Please provide the following details of your staging site installation.

• Staging WordPress Login URL
• Staging website Admin level username and password

Alternatively, you can try using the bundled Envira gallery plugins. Both have similar features you need. Please visit the links below for more details and plugin usage instructions.

• Envira Gallery: Bundled Plugin Documentation

Hope it works for you.
Thanks

[Glasseye]

If possible, I would prefer if we could resolve the issue with Slider Revolution. I will provide the details to the staging site.

[prakash_s]

Hello @Glasseye,

It seems that the Revolution slider shortcode is conflicting with the V2 modal but that can be overcome by adding the following custom CSS under X/Pro-->Theme Option --->CSS

.x-modal:not(.x-active) {
 display: none !important; 
}

Note: The downside of this custom CSS code, the Fade-in the animation of the modal would not work properly.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[Glasseye]

Hi Prakash,

Thanks for the code, it worked perfectly to solve the modals blocking up the page.

Thanks for the help.

[tristup]

Hi @Glasseye,

Glad that we are able to help you.

Thanks