Mobile menu works on local XAMPP, but not on GoDaddy

The following problem is confined to mobile views of this website. The non-mobile menu works fine.

For the life of me I can’t figure out why, all things being equal — except that my localhost is a Windows machine running XAMPP, and my remote host is GoDaddy WordPress LAMP hosting with SSL — why the mobile menu does not work on the remote server, but does work on my local laptop server.

The code is identical. The js is identical. I’ve disabled (but re-enabled) the plugins to see if a plugin was the source of the problem, but there aren’t many plugins, and there doesn’t seem to be a conflicting plugin.

Even the resulting html output between the remote installation and the local installation is identical. I can switch tabs (in Chrome) and compare the developer panel, inspect elements, toggle the menu hamburger to see the changes between “toggle-on” and “aria-expanded=true”, and I see no difference.

According to Chrome’s element inspector, even though I can’t actually see the menu, I can see that the container collapses and expands when you click the button. The developer element inspector shows that all the elements are there, they are just “invisible”.

The two installations are identical, except for the url differences:

https://joyful-birthing.com

http://joyful-birthing/ (a local virtual server configuration in the Apache httpd.conf)

I’ve outputted the menu button click action, so I know the javascript is working on the remote server, as it is working on the localhost.

Even the menu elements and container are actually present in the remote installation, they are just invisible. I’ve tried making the background red, forcing a “display:block”, “z-index:100”, all in an effort to force the mobile menu to be visible, but it just won’t show. I have no idea what’s going on.

Read more here:: Mobile menu works on local XAMPP, but not on GoDaddy

Leave a Reply

Your email address will not be published. Required fields are marked *