Response title
This is preview!
jQuery dropdown triggering on wrong window width, but in Firefox only - really, really stuck!
in Using jQuery
•
9 years ago
Hi,
I'm very much a jQuery beginner - I'm a designer and an HTML/CSS developer, but am really new to JS and jQuery.
I've built a Wordpress-based site at www.fpsl.eu which has a normal horizontal navigation menu (#mmenu) at large screen widths, but collapses into a vertical dropdown at screen sizes below 980px, at which point it is hidden and can be revealed by clicking on a button (the button is displayed using a CSS media query, the revealing of #mmenu on click is handled by jQuery). Standard mobile navigation behaviour.
In Chrome, Safari and IE, this works as expected.
However, in Firefox, at about 994px width the jQuery kicks in and hides #mmenu. The CSS media queries controlling the button, and reformatting the menu as vertical, don't trigger until 980px. For screen sizes between 980-994px, then, no menu is shown at all, just a blank navigation bar.
Even weirder: if I remove all content below the header from the HTML, the problem resolves. This makes me think it might have something to do with loading speed...but then why would it be triggering *early*? I really have no idea what to do and as a beginner this is massively overwhelming. :(
The full site is at www.fpsl.eu.
I've made a JSFiddle featuring the full code of the page, which replicates the problem, here - jsfiddle.net/juk5w/18/embedded/result
...and one featuring only the header code, which works as expected, here - jsfiddle.net/Kg6h4/2/embedded/result
If anyone can offer any suggestions it'd be greatly, greatly appreciated. I just don't know what to do! I'm using the latest version of Firefox, 23.0.1.
I'm very much a jQuery beginner - I'm a designer and an HTML/CSS developer, but am really new to JS and jQuery.
I've built a Wordpress-based site at www.fpsl.eu which has a normal horizontal navigation menu (#mmenu) at large screen widths, but collapses into a vertical dropdown at screen sizes below 980px, at which point it is hidden and can be revealed by clicking on a button (the button is displayed using a CSS media query, the revealing of #mmenu on click is handled by jQuery). Standard mobile navigation behaviour.
In Chrome, Safari and IE, this works as expected.
However, in Firefox, at about 994px width the jQuery kicks in and hides #mmenu. The CSS media queries controlling the button, and reformatting the menu as vertical, don't trigger until 980px. For screen sizes between 980-994px, then, no menu is shown at all, just a blank navigation bar.
Even weirder: if I remove all content below the header from the HTML, the problem resolves. This makes me think it might have something to do with loading speed...but then why would it be triggering *early*? I really have no idea what to do and as a beginner this is massively overwhelming. :(
The full site is at www.fpsl.eu.
I've made a JSFiddle featuring the full code of the page, which replicates the problem, here - jsfiddle.net/juk5w/18/embedded/result
...and one featuring only the header code, which works as expected, here - jsfiddle.net/Kg6h4/2/embedded/result
If anyone can offer any suggestions it'd be greatly, greatly appreciated. I just don't know what to do! I'm using the latest version of Firefox, 23.0.1.
1