Issues with Litespeed Cache and the Mobile Menu

  • Resolved davidisenoi

    (@davidisenoi)


    5 months, 2 weeks ago

    Hi,

    The mobile menu doesn’t work when I try to navigate a second time from certain pages. For example: after we visit the home page, we can toggle the menu and navigate to Articles. The second time I tap on the mobile menu it won’t open anymore (this is true for Contact, About pages also).

    I deactivated Litespeed Cache plugin and it works normally after that. It seems that the caching plugin is the issue.

    I already tried the solutions that I could find on this topic to fix it by myself, including adding:

    navigation.min.js
    navigation-lite.min.js
    kadence-mega-menu.min.js

    …to the JS exclusion files, inside Litespeed. As we can see in the picture bellow, navigation.min.js could be the cause, as that file shows up in the console when the issue appears.

    Screenshot: https://ibb.co/F48LZwm

    Excluding it didn’t fix the issue though.

    How can I make the mobile menu toggle action work again, from all pages?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    I can verify that the issue is happening because of LiteSpeed.

    If I try to view your website before being optimized by LiteSpeed, the page will display correctly. – https://share.zight.com/d5uXROYG

    You can also see this by adding the ?LSCWP_CTRL=before_optm parameter on the URL.

    You mentioned:

    “I already tried the solutions that I could find on this topic to fix it by myself, including adding:

    navigation.min.js
    navigation-lite.min.js
    kadence-mega-menu.min.js”

    Did you mean you included the files in the JS Deferred Excludes?

    We need to first identify which specific feature from LiteSpeed is causing the issue.

    You can also try the other troubleshooting steps recommended in this article to see which settings would resolve this issue: https://docs.litespeedtech.com/lscache/lscwp/ts-optimize

    Let us know how it goes, we’ll be more than happy to help.

    Best regards,
    Teejay.

    Thread Starter davidisenoi

    (@davidisenoi)

    Hi Teejay,

    Yes. I forgot to mention that detail. Here’s a screenshot: https://go.screenpal.com/watch/cZ11DeVN3H9

    Ok, I followed the documentation that you provided. I went ahead and disabled all the CSS optimization functions, one by one and it looks like it is caused by a CSS optimization. Respectively, the “CSS Combine” feature: https://go.screenpal.com/watch/cZ11D0VN3KM

    I even removed the above mentioned JS file from the deferred exclusion list and it works, with that “CSS Combine” function disabled.

    Continuing with the documentation, I managed to find and went ahead the exclude the CSS file that was causing it. For me, it was header.min.css. Here’s a screenshot: https://go.screenpal.com/watch/cZ11DJVN3Nj

    Thank you very much for your help!

    Have a blessed day,
    David

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