2

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.

I may have to concede that the problem is theme related. I'm disabling the hamburger menu to the public for, will have to work on the problem in the sandbox. The reasons cited for closing the question aren't valid, since I can prove the javascript, jquery, and css aren't the issue. I'm not sure where the problem lies, but the comments below about "can't find the javascript," or "javascript is hanging on ReCaptcha", etc., are not accurate or useful. Thanks for trying, anyway.

7
  • 1
    Check the browsers error console in the dev tools, it reveals the problem, specifically ReCaptcha is loaded multiple times on the page, causing a JS error which then prevents anything else from running
    – Tom J Nowell
    Jul 29, 2018 at 20:54
  • 1
    Hi Tom J Nowell, I am aware of the "ReCaptcha is loaded multiple times on the page" error in the console. It concerned me, and I researched the error, but I didn't mention it because I get the exact same error in my local installation, which does work. Maybe I need to take a second look at the error, thanks. Jul 30, 2018 at 14:06
  • 1
    Also, other pages that don't invoke recaptcha, and don't have the error in the console have the same problem. Thanks for looking! Jul 30, 2018 at 14:31
  • Further digging suggests this is a pure JS problem, and a logic error. The click handler is only added when the window is resized and the window is less than a certain width. Since mobile browser windows are full screen and cannot be resized, the handler is never added. As far as I can tell it should work on neither unless you manually resize the window or change the viewport
    – Tom J Nowell
    Jul 30, 2018 at 21:18
  • hmmm no, I'm struggling to find where the javascript for the menu code is on your site, and you've provided no code in your question. I'm unable to diagnose the problem as a result. However I still don't see what this has to do with WordPress, this could be a Drupal or a Joomla site and it would make no difference, and should have been asked on stack overflow. It's jQuery/Bootstrap expertise you need, not WordPress
    – Tom J Nowell
    Jul 30, 2018 at 21:23

0

This site is temporarily in read-only mode and not accepting new answers.

Browse other questions tagged .