I recently had the fun of tracking down why my finely tuned website would not work as anticipated once I made everything live and active. My buttons did not work and all of a sudden my mobile menu did not pop up as anticipated. It all looked good while in development, why is it not working in real life?
After an intensive look back on all the settings on each item I had set, many google searches and still nothing. Has no one ever experienced this anomoly? This can’t be. I am not the only one.
I then decided to to look at the settings my hosting provider had on the site as there were some changes recently. One in particular caught my eye as I have had issues with it in the past and that was caching. So I went to that section of the controls and made sure to turn off all caching and try again.
Still no change, same problem. Let’s dig a little deeper.
As I am reading up on the way the host does caching and what it specifically does, I hit on something that peaked my interest a little. HTML, Css, and JS minification. What the heck is that?
So, if you are trying to use a CDN (Content Delivery Network) such as Cloudflare, these features come into play. Not everything plays nice with it either, as we are about to find out.
The CDN makes copies of your WordPress site and will take advantage of these features if it is enabled through whatever plugin you are using, or through the control panel of your hosting provider. I happened to find these settings in the plugin that I use. Once in the plugin and see a lot about minification and a lot of different settings to turn on and off.
The following settings were the offenders of my entire issue:
Problem solved. On to the next one….
After running into this issue once again I decided to narrow it down to exactly what it was that stopped the menu from working on a mobile device. Turning the option below off appeared to be the culprit. I turned everything else back on and the menu still worked.