Title: Debugging menu button CSS/JS
Last modified: August 3, 2017

---

# Debugging menu button CSS/JS

 *  Resolved [lassial358](https://wordpress.org/support/users/lassial358/)
 * (@lassial358)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/debugging-menu-button-cssjs/)
 * Hello,
 * I’m using the full-width theme at [http://saunologia.fi](http://saunologia.fi)
   and have modified it overtime quite a lot.
 * Now I find myself in an awkward position in which the menu button has become 
   dysfunctional ONLY in mobile browsers and the behavior is not reproducible, for
   instance, in desktop Chrome mobile views.
 * Do you have suggestions how to debug this kind of challenge. It seems most likely
   to be a CSS issue, possible conflict with the novel top widget area I’ve added
   to the theme.

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Theme Author [Tomas Mackevicius](https://wordpress.org/support/users/tomasm/)
 * (@tomasm)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/debugging-menu-button-cssjs/#post-9384845)
 * 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.
 *  Thread Starter [lassial358](https://wordpress.org/support/users/lassial358/)
 * (@lassial358)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/debugging-menu-button-cssjs/#post-9385792)
 * 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](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](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.
 *  Theme Author [Tomas Mackevicius](https://wordpress.org/support/users/tomasm/)
 * (@tomasm)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/debugging-menu-button-cssjs/#post-9386416)
 * 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.
 *  Thread Starter [lassial358](https://wordpress.org/support/users/lassial358/)
 * (@lassial358)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/debugging-menu-button-cssjs/#post-9386451)
 * 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/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/functions.js?ver=2.2.0)
   [http://saunologia.fi/wp-content/themes/tiny-framework/js/skip-link-focus-fix.js?ver=2.0.1](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!?
 *  Theme Author [Tomas Mackevicius](https://wordpress.org/support/users/tomasm/)
 * (@tomasm)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/debugging-menu-button-cssjs/#post-9398446)
 * 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.
    -  This reply was modified 8 years, 10 months ago by [Tomas Mackevicius](https://wordpress.org/support/users/tomasm/).
 *  Thread Starter [lassial358](https://wordpress.org/support/users/lassial358/)
 * (@lassial358)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/debugging-menu-button-cssjs/#post-9410080)
 * 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…

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Debugging menu button CSS/JS’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/tiny-framework/2.3.1/screenshot.
   png)
 * Tiny Framework
 * [Support Threads](https://wordpress.org/support/theme/tiny-framework/)
 * [Active Topics](https://wordpress.org/support/theme/tiny-framework/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/tiny-framework/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/tiny-framework/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * 6 replies
 * 2 participants
 * Last reply from: [lassial358](https://wordpress.org/support/users/lassial358/)
 * Last activity: [8 years, 10 months ago](https://wordpress.org/support/topic/debugging-menu-button-cssjs/#post-9410080)
 * Status: resolved