Mobile Menu dont work when delay Js
-
Hello, I am using Astra Pro but due to some problem when i delay the Js, the Mobile hamburger menu does not work (when you clic it, do nothing).
I need to exclude the mobile menu from Js optimize (I use litespeed cache).
how could I exclude it? somebody has the same issue?
this is the only thing about the theme that prevents me from finishing optimizing the web
thank you
-
This topic was modified 4 years, 1 month ago by
gimyd.
The page I need help with: [log in to see the link]
-
This topic was modified 4 years, 1 month ago by
-
To prevent malfunctions cache plugin offers to exclude scripts from being optimized. In your case script for mobile menu needs to be loaded without delay or deferred loading. To get it work again you have to exclude it.
In many cases it could help reading the documentation…..
https://docs.litespeedtech.com/lscache/lscwp/ts-optimize/#test-the-list
Hello, thank you very much for your answer, but I know that you have to exclude the mobile menu, the problem is that I can’t find a way to name it, that is, I can’t find the name of the js file that astra uses for the mobile menu to be able to mention it in litespeed cache
Hi,
you can wildly use
wp-content wp-includesinto the exclude list first, this will tell you if it’s external js file , or inline js code
then narrow it down progressively
best regards,
Hello! Thank you very much for your answer! I’m still here with the problem, try adding those two directories and the problem persists, any other suggestions?
The site is https://dolcepanna.com.ar and im using Astra Theme-
This reply was modified 4 years, 1 month ago by
gimyd.
okay , that means the script in question is probably the inline js
please try this
disable plugin
view page in your browser , go to -> view source codein source code page , search for keyword
<script, if it doesn’t link to a file link , then it is an inline JSnow extract them all , save them into a text file
now , extract one string or word from each inline JS , and put them into the JS exclude and defer JS exclude list , re-enable the plugin , and check again.
New Update
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.
i 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 because the speed difference is huge
we’re getting close!`-
This reply was modified 4 years, 1 month ago by
gimyd.
Another one TIP
I also noticed that if the option to generate Ucss of Litespeed is activated added to the js delay (regardless of what differs everything js that “astra” word contains) the speed score is 100 – 100 inclusive in mobiles !!!
But this for some reason also breaks the mobile menu (But this time because of the Ucss option not Js delay) I tried to add “Astra” to the Ucss exlude list but it didn’t work as with the JS delay
I paste the support number JFJOALTA
J’s it’s solved, now the problem it’s mobile menu not working with Ucss activated
UCSS is complicated , please check this page
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
Hi, I have the same problem with Astra Theme free, I use a child theme and when I activated delayed JS from LiteSpeed the hamburger menu on mobile is not working. I tried changing the JS setting to Deferred, and it works but sacrificed the page speed point from Google. I want to keep using the Delayed option as it has a good Pagespeed score, can you help me to find which JS script should be excluded in order to activate my mobile menu again? Thank you
This is the site I have problem with
https://cendigia.com/Hi, I have the same problem with Astra Theme free, I use a child theme and when I activated delayed JS from LiteSpeed the hamburger menu on mobile is not working.
This is a logical consequence. This Hamburg menu is javascript driven. However, the setting “delayed” means that all javascript files will only be loaded when the user performs an action. Action means either scrolling or clicking anywhere. So as Hambuger Menu can only work when the user performs an action, but for that it’s already too late for the hamburger menu, so you have to change the settings to deferred.
If you want to keep the delayed setting you either need a different theme or the hamburger menu has to be reprogrammed in such a way that it works without Javascript.
@serpentdriver Thanks for the helpful explanation!
@gimyd Have you maybe got a solution for the UCSS issue with the Astra menu not opening on mobile phone? Do you maybe know what to add to the UCSS Whitelist?@ms100 Tired of the multiple errors that this plug-in generated for me,
I simply use it for cache and little else.
I contacted support multiple times (both Astra and Litespeed) and they always give you a superfast and friendly useless answer, empty of content.(More than 10 back and forth messages without finding a solution or moving forward a bit, exhausted my patience)
Thanks for your reply @gimyd
If anyone is interested, maybe this will work to get the Astra hamburger toggle menu to open on mobile devices:
UCSS Selector Allowlist: .ast-mobile-header-wrap -
This reply was modified 4 years, 1 month ago by
The topic ‘Mobile Menu dont work when delay Js’ is closed to new replies.