[Support request] Mobile Off Canvas Menu is visible on desktop at the footer area

Home Forums Support [Support request] Mobile Off Canvas Menu is visible on desktop at the footer area

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #2028087
    Asen

    Hello!

    The mobile off canvas menu is showing up on desktop at the footer area.
    I didn’t do anything intentionally.
    I tried disabling some plugins that I have installed lately thinking that might have caused the issue, but it is not the case.

    https://snipboard.io/2JXYFR.jpg

    Many thanks in advance for your help!

    Regards,

    Asen

    #2028110
    Leo
    Staff
    Customer Support

    Hi there,

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

    Let me know πŸ™‚

    #2028192
    Asen

    Hi Leo,

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

    Regards,

    Asen

    #2028256
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #2028605
    Asen

    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

    #2028631
    Elvin
    Staff
    Customer Support

    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.)

    #2028695
    Asen

    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!

    #2028706
    Elvin
    Staff
    Customer Support

    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.

    #2028723
    Asen

    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.

    #2028743
    Elvin
    Staff
    Customer Support

    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. πŸ˜€

    #2028768
    Asen

    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!

    #2028800
    Elvin
    Staff
    Customer Support

    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.

    #2028810
    Asen

    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?

    #2028894
    David
    Staff
    Customer Support

    Hi there,

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

    #2028896
    Asen

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.