Support » Theme: Astra » Astra Mobile menu not working with litespeed cache

  • Resolved gimyd

    (@gimyd)


    I have this problem and I can’t find the solution, the icon appears but touching it doesn’t display it, it doesn’t do anything, apparently it has to do with deferring or delaying the loading of Javascript and the solution must be to exclude the Mobile menu from these optimizations, but i cant found the way to do it (or I don’t know how to do it)
    When I turn off the Js async or defer it works normally, but the web lost all the speed.
    how can i exclude this js to optimize all the rest of the web?

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • v.307

    (@victor307)

    Exact same question from my side.

    Load JS Deferred > Astra mobile toggle menu is opening when touched with Deferred, but does not open when touched with Delayed.

    The speed difference between Deferred and Delayed is HUGE for mobile, so it would be amazing to be able to use this function.

    I have tested this option with all plugins deactivated. Deactivating all plugins did not solve the issue.

    Thread Starter gimyd

    (@gimyd)

    I opened a ticket in the astra support where they are very kindly trying to find the solution, in case they find it I plan to publish the answer here.

    The solution is clearly to exclude the JS that opens the mobile menu, the problem is that I don’t know which specific file (the file name) is what makes it work and that’s why I can’t exclude it, does anyone know what js opens the mobile menu?

    Thread Starter gimyd

    (@gimyd)

    any updates?

    Thread Starter gimyd

    (@gimyd)

    if you include the word:

    astra

    In Defer JS Exclusions and Exclude JS. The mobile menu starts working!

    BUT the problem is that it excludes all the js that includes the word “astra” so the web speed score decreases since it excludes not only the mobile menu but everything that has “astra” in its name.

    We need to find the js file of the menu with the name “astra” in the name of the file to be able to exclude only that part.

    we’re getting close!

    Also note that if Litespeed’s Ucss optimization option is activated (is deactivated right now to identify the name of the js who moves de mobile menu) the web loads extremely fast! giving ratings of 100-99 in almost all speed meters including mobiles, (great theme that you have developed)

    BUT the mobile menu is also broken if we activate this option.

    If we can fix both problems of the mobile menu and get it to work even excluding all js that contains the word “astra” (although it would be great to identify what js makes the mobile menu work to exclude it alone) all the webs i have running Astra and Litespeed (8 websites) will give 100-100 in any speedtest. Insanely fast.

    • This reply was modified 5 months, 3 weeks ago by gimyd.
    • This reply was modified 5 months, 3 weeks ago by gimyd.
    Thread Starter gimyd

    (@gimyd)

    @victor307 have you found how to make it work when ussing Ucss?

    The difference its huge, 53 points vs 92 points in pagespeedinsights

    When using Ucss Mobile menu doesnt work

    Hi gimyd,

    I have not yet been able to find a solution, but if I do of course I will share it.

    I have found this source regarding the Ucss your have mentioned: https://blog.litespeedtech.com/2021/06/14/unique-css-for-wordpress/

    `From the WordPress dashboard, navigate to LiteSpeed Cache > Page Optimization > CSS Settings and set CSS Combine to ON. Then set Generate UCSS to ON. Save your changes.

    Next, turn on Cache Mobile. This is because Unique CSS for a mobile view will be different from that of a desktop view. Navigate to LiteSpeed Cache > Cache and set Cache Mobile to ON.

    Finally, Purge All, either from the Admin Bar or via LiteSpeed Cache > Toolbox > Purge, so that new cache files are created for each page. This is necessary so that each page’s HTML links to the correct combined Unique CSS file.`

    I am hoping for the Astra developpers to be able to give us some more information about the toggle-menu.

    Thread Starter gimyd

    (@gimyd)

    The js file that broke the hamburger menu when delaying the js load is /wp-content/uploads/astra-addon/astra-addon-6244ca6788c704-30195651.js, maybe it will help astra Team to release a patch in the future that will solve this problem.

    I just wanted to comment on it in case it helps you later.

    I’m still waiting for news about UCSS or how to generate a single css file without breaking the menu, but im gonna open a new thread only for UCSS, i mark the js error as resolved

    Thanks for the update @gimyd

    Have yous tried turning off WP Rocket?

    Worked on my end with the mobile menu

    Your recommendation for using deferred instead of delayed and excluding the particular javascript file worked partially for me.

    The Hamburger menu only responds after on scrolls and the sticky menu is activated.

    Have you managed to make any further progress on this?

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