Mobile Off Canvas Menu is visible on desktop at the footer area

Hi there,

Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?

Let me know :)

Hi Leo,

Thanks for your answer.
I disabled all plugins except for GP Premium, GenerateBlocks, and GenerateBlocks Pro. Issue is the same.

Regards,

Asen

Hi there,

Can you disable all plugins except GP Premium but including cache plugin for us to inspect?

And if you are using a child theme, can you switch to the parent theme?

Let me know :)

Hi again!

This time I disabled everything as you said and left WP Rocket and GP Premium.
The issue is the same.
The issue is gone when I disable GP Premium.
I don't use a child theme.
Thanks for your help!

Regards,

Asen

Hi there,

The issue seems to be w/ how the caching plugin saves the CSS related to off-canvas panel.

You can actually test this out w/ WP Rocket enabled by adding /?nowprocket=1 to the URL of your site when checking a page.

If you're using CDN or if your webhost has some sort of page caching, can you try clearing it?

As for WP Rocket, can you try testing with different variations of setting?

Start with only CSS minification enabled, you then enable settings 1 by 1 and see what breaks it. (Perhaps its the critical CSS.)

Hi again!

That's strange. I disabled WP Rocket, cleared Cloudflare cache and the issue is the same.
However, when I test with /?nowprocket=1 the issue is gone.
Actually it's partially gone since I still have the mobile menu sign (the three horizontal dashes) at the main menu navigation at the top. But the menu is now not visible at the footer area.
https://snipboard.io/wEaHkB.jpg

Does that mean that simply disabling WP Rocket leaves some traces of the plugin?

In that case, is it worth it proceeding as you suggest and test WP Rocket with various settings? Or directly contacting them to add some exceptions maybe?

Thanks!

Does that mean that simply disabling WP Rocket leaves some traces of the plugin?

The site has basically 2 "layers" of cache. 1 from WP Rocket, another from CDN (Cloudflare).

If Cloudflare serves a version of a cached version of site with WP Rocket's settings then the changes we do on the site won't reflect regardless of WP Rocket being enabled/disabled because Cloudflare already pre-determines what it serves.

We can debug this by doing an A/B test for the site. The control test would be a test of the site with no Cloudflare and WP Rocket. This is will serve as a basis of a known working setting.

You then test with WP Rocket enabled but w/o Cloudflare. Once you get the best setting that works w/ WP Rocket, proceed to enabling Cloudflare.

Hi again.

Thanks for your answer.
Every time I do changes, I clear cache from Cloudflare too. Is that a viable test? Or is it needed to completely disable Cloudflare?
So now WP Rocket is not installed and Cloudflare cache is purged.
The issue is the same.

I've checked the site and it doesn't seem like it's WP Rocket is inactive as this still shows up - https://share.getcloudapp.com/2NuPQL4z

Note: It's also possible that your server has it's own page caching. If that's the case, you may have to always clear 4 caches every time you do any changes w/c are:

1.) Browser cache
2.) Cache from plugin (WP Rocket)
3.) Cache of CDN (Cloudflare)
4.) Page caching (from webhost, if it has one)

Note: We know that having /?nowprocket=1 makes the page work properly as shown in this demo - https://share.getcloudapp.com/8Lu9WOvD

You just need to get the right combination of settings to make things work together properly. You may have to ask Cloudflare and/or WP Rocket for any inputs/recommendations on this as this really isn't something the theme controls. :D

Thanks Elvin!
You were right, Cloudways (the host provided) also serves cache. I purged it. Issue is the same.
I will contact WP Rocket for that then.
Just a small remark/question - when I test with /?nowprocket=1, the mobile menu sign (the three horizontal dashes) is still present in the main menu navigation at the top right. I'd like to remove that and show it only on mobile as it was before the issue appeared.
So, this is also part of the issue. Does solving the WP rocket issue will solve that or do I need to do anything else to remove that menu sign and show it on mobile?
I doubt that since with /?nowprocket=1 the menu sign is still present.

Thanks!

Just a small remark/question – when I test with /?nowprocket=1, the mobile menu sign (the three horizontal dashes) is still present in the main menu navigation at the top right. I’d like to remove that and show it only on mobile as it was before the issue appeared.

That shows up on desktop viewport if you set the Mobile breakpoint on Appearance > Customize > Layout > Primary Navigation to a really high value. (the default is 768)

This Mobile breakpoint value tells the theme when to show up the "mobile menu sign" also known as hamburger icon.

Example, if you assign 1024 on this field, the page will check if the viewport width of the page is 1024px or smaller. If the page is 1024px or smaller, the page will display the icon. Note: 1024 is pretty huge, it's used by some desktops and tablets. 768px is what's used on majority of mobile phones.

Thanks, I understand.
However, I set it to 768 px, cleared all cache and the hamburger menu still shows up on desktop.
In fact, it doesn't disappear even if I lower down that value.
What should I do in that case?

Hi there,

i do not see the hamburger menu on desktop.
Try clearing your browser caches.

Yes, I just set the Off Canvas Mobile Menu to show on mobile only.
Thanks!