You have to look at first part of js/navigation.js and what classes it looks for. Perhaps you changed something?
When you click on button
<nav id="site-navigation" <strong>class="main-navigation"</strong> aria-label="Primary Menu" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
becomes:
<nav id="site-navigation" <strong>class="main-navigation toggled"</strong> aria-label="Primary Menu" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
And gets styles from the toggled styles.
I can reproduce this in Firefox web dev tools (ctrl+shift+i) in responsive design mode. On my site I can see the change, on your site click doesn’t happen, so I would say something happened to JS.
Thanks Tomas,
However, I was unable to reproduce that even with your Firefox tip.
I have not touched that .JS file. I suspect this might have something to do with the W3 Total Cache plugin JS minification and wrong inclusion order of JS files.
The only JS changes are in the child theme’s JS
http://saunologia.fi/wp-content/themes/sauna-tiny/js/custom-scripts.js?ver=2.2.0
I also double checked my customized Child CSS for any properties which might conflict site-navigation, but I don’t see anything.
https://www.saunologia.fi/wp-content/themes/sauna-tiny/style.css?ver=2.2.0
Mysterious.
If I get my Anrdoid device recognized in Chrome Desktop I may get somewhere.
I checked the order and dependencies, finding nothing wrong – as well as the fact seems unlikely to create that kind of behavior. The impossibility of debugging this in development browser makes this very inconvenient.
Right, I think minification is the issue, I always check those options before enabling, usually as I remember, I could not use all possible improvements. Try to disable W3TC features regarding JS one by one and then check the button.
Okay, thanks for the tip.
I now un-minified
http://saunologia.fi/wp-content/themes/tiny-framework/js/navigation.js?ver=2.2.0
http://saunologia.fi/wp-content/themes/tiny-framework/js/functions.js?ver=2.2.0
http://saunologia.fi/wp-content/themes/tiny-framework/js/skip-link-focus-fix.js?ver=2.0.1
with the desired effect!
However, I want to minify as much as possible so I need to take the files back to minified JS package one by one to see when it breaks.
I think this feature is very unintuitive; why should JS interpretation fail only in mobile devices!?
It doesn’t depend on the browser (most likely), I think if the button would be active on normal view, it would be also afflicted.
Personally, I think that minification doesn’t do much in this case as these JS files are very small right from the beginning – just several functions. And if you use gzip compression setting on your web server (this is 1st thing you should enable), then your site will be served as gzip and extracted on the client side, so JS compression would have almost no effect, at least that’s how I understand this.
Most likely you would get bigger performance impact by joining them into one file (concatenation), this way you would avoid extra http requests.
Okay.
I forget to mention that W3 Total Cache minification actually includes combining manually listed files in the user defined order (i.e. concatenation).
However, this issue was not solved, although I dislike the fact that I have no idea why it broke down; I have minified 25+ JS files (sic!) without problems.
Anyhow, I’m quite pragmatic so I’ll move on to other changes and optimizing the mobile view headers next…
