Modal Menu Conflict

[Nuera]

Hi there- I have a conflict that I’ve identified with a couple sections of a few pages on a site we’re developing.

It seems that any page which features a slider section that it’s pushing the modal menu off the screen.

Steps to replicate:

1. visit https://pg.nueramarketing.com/ on a mobile device

2. Hit the Menu button

3. Slide the entire screen to the far right and you’ll see the menu open way off the canvas

This only seems to be occurring on pages that include a slider. Do I have my slider settings wrong or something?

Thank you in advance!
Grant

[nabeel]

Hi Grant,

Thanks for reaching out. The issue seems to be happening because of your slider setup. Upon inspecting I see the slides are overflowing from the site container which is pushing the offcanvas menu far to the right. I have set overflow to hidden of your Featured Projects section (see screenshot) This seems to have corrected the issue.

Please clear your browser’s cache and check your homepage now. Let us know if this helps!

[Nuera]

Perfect, thank you!!

[Nuera]

Actually, I do have one more question which I think might be related.

I noticed that the sticky menu on that page seems to only show when I’m scrolling up, but does not appear when scrolling down.

It’s also oddly pushed off the right side of the canvas by a few pixels, which is strange.

Could you help me identify what the reason for that might be?

[tristup]

Hi Grant,

Glad that we are able to help you with this. Regarding your next problem, I have checked your website multiple times but didn’t find the problem. Can you please provide any screenshots marked with the issue or any video that helps us recognize the problem?

Thanks

[Nuera]

Sure-

The first example here is just scrolling down the page:

This second example is what happens when I scroll up:

This is not happening on every page either. For instance, everything works as expected on https://pg.nueramarketing.com/faq/

Thank you for your help!

[ruenel]

Hello @Nuera,

I have checked your site on my phone. It is working as expected.

I can only replicate the issue on your homepage. It could be just a caching issue. Please clear all your caches again or use private browsing mode in your Chrome or other mobile browser. You might want to check this out:

• Site Appears Broken after Updates | Themeco Docs

Best Regards.

[Nuera]

Ok, so all caches are cleared and the issue persists on my Android device in Chrome.

Every iPhone I use running Safari runs the site just fine, but in Chrome I’m seeing another weird issue where there is a margin on the right side of every page on the site (screenshot attached). I assume these issues must be linked and hoping you can help me figure out what’s going on. I’ve never encountered this error before.

Thank you!!

[ruenel]

Hey @Nuera,

You have set the width of the Image element to 100vw. You should also set a maximum width of 100% to make sure that the width will not exceed the bounds of its container.

Best Regards.

[Nuera]

Sorry if I didn’t clarify- that bug was on the entire site on iPhone using Chrome. I just used that screenshot because it depicted the error visually.

If you can think of anything that could create that margin on the entire site, I’m all ears - thank you!

[ruenel]

Hello @Nuera,

The Row element container is not 100%. Since you set the width of the Image to 100vw, it means that the image will be as wide as the browser screen which exceeds the width of the Row element and this is why you can see that the image goes beyond the black background color. If you can set a maximum width of 100%, then we can prevent that from happening. We can start fixing this page first and move on to the next one.

Thank you for your understanding.

[Nuera]

Haha that’s fine- I’ve set it to 100% in order to move to the next step of testing. The problem is still present on every other page, which of course have no relation to the image you had mentioned.

[ruenel]

Hello @Nuera,

This is now what I see on my phone. The Image does not go beyond the bounds of the Column element.

The Sticky Menu shows fine on my phone browser too. I have used Brave and Chrome browser.

Thanks.

[Nuera]

Ok, thanks Rue! I appreciate your help on it!

[ruenel]

As always, you are most welcome @Nuera!