Astra Mobile menu not working with litespeed cache

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.

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?

any updates?

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 2 years, 7 months ago by gimyd.
• This reply was modified 2 years, 7 months ago by 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.

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.

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?

I had a similar problem with Astra’s menu and LiteSpeed cache. It’s my understanding from researching the issue that, as of the time I am writing this, Astra is aware and still working on how to resolve it.

In the meantime, in my case the solution was to turn OFF the following setting: “LiteSpeed Cache” > “Page Optimization” > “JS Settings” > “JS Combine Internal and External” … then purge all the LiteSpeed cache.

By doing so, my Page Load Time and PageSpeed Score were NOT impacted.

I hope this helps someone else who comes across this looking for “astra mobile menu not working” like me ??

• This reply was modified 1 year, 8 months ago by timgllc. Reason: Don't forget to "Purge All" when you change LS settings

I didn’t aware of same problem on my blog site cause i generally use laptop??. I looked entirely after notice that “users not staying so long on website”. Problem was litespeed plugin settings arranged by me.

I Fixed it! Yaay

Solution : LiteSpeed Cache plugin > Page Optimization > JS Settings

switch to close 2 options on below

Merge to JS, Merging Internal and External CSS

Note: Don’t forget to delete CSS and JS cache on LiteSpeed Cache plugin > tools after done switches

• This reply was modified 1 year, 5 months ago by bilgilendiniz.

Great stuff to share, @bilgilendiniz. Thanks!

Kind regards,
Herman ??

I stumbled across this thread while facing the same issue. However, this is now not caused anymore by JS but by the UCSS generated by litespeed cache. I found that including following CSS selectors in the UCSS selector allowlist solves it:

.main-header-menu
.menu-item
.ast-header-break-point .main-navigation ul .menu-item .menu-link
.menu-toggle
.main-header-menu-toggle
.ast-mobile-menu-trigger-minimal
.toggled
.ast-mobile-header-content
.ast-builder-menu-mobile
.ast-builder-menu
.ast-builder-menu-mobile-focus-item
.ast-builder-layout-element
.site-header-focus-item
.ast-main-header-nav-open
.ast-header-break-point .main-header-bar-navigation
.ast-header-break-point .main-navigation .stack-on-mobile li

Thanks for sharing this, @bytefarmer! ??

Kind regards,
Herman ??