Where is width defined for changing from desktop navigation to mobile navigation?

[graphicz]

I need the desktop menu todisplay in iPad/tablet landscape.

In Firefox emulation I have, by changing stylesheets got the menu to display down to 667px before switching to mobile. (iPad width is upwards of 768px depending on the nature of the 'viewport declaration')

However in iPad landscape (on a device) the site still displays mobile navigation. The client wants the desktop navigation to display in iPad/tablet landscape and to switch to mobile nav in iPad/tablet portrait.

I have scoured the css and also responsive.js. There are no pixel widths in the latter but they must be set somewhere? There is a <actinic:variable name="SiteJavascript" selectable="false" /> in the javascript headrer functions which is not editable and I suspect the answer may lie there?

SO! How can I change the width that SD's js is changing from Desktop to Mobile navigation?

Thank you!

[peblaco]

In the default theme it's done in CSS media queries which change the layout to mobile at 800px.

[graphicz]

I have scoured the css

Yes Louise, I know, I have scoured the css and changed all the widths. The width at which the desktop navigation goes to mobile in Firefox Emulation on desktop is now 699px.
But, in an actual iPad the mobile menu displays in landscape and portrait. I don't have an 800 or 767 left in any css so it must be in the js?

[graphicz]

My Bad!

Well it was 'my bad'!

When iPhone 5 was launched my sidepanel mobile menu button stopped working in iPhone 5.
I therefore added some iphone specific media queries, the iphone 5 one solved my issue.

This is it

/*– iPhone 5, iPod Touch 5Gen–*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1136px) {

}

/*– iPhone 5, iPod Touch 5Gen–*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1136px) and (orientation : landscape) {

}

It seems that now (already!) -webkit-min-device-pixel-ratio is old hat and it was this media query causing the resizing issue.

I removed the two blocks of code above and that is what fixed it.

For info, the batch of phone queries I use is this:

/* ### Normal ### */       

       
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){

}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){

}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){

}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){

}

/* #### Tablets Portrait or Landscape #### */
@media screen and (max-device-width: 799px) {

}

/*=== New iPhone Stuff ===*/

/* Sort of new catch all */
@media screen and (max-device-width: 414px) {

}

/*– iPhone 4, 4S, 5, iPod Touch 4Gen, 5Gen–*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:640px) and (orientation : portrait) {

}

/*iPhone 6 (Standard View) and iPhone 6 Plus (Zoom View):*/
@media screen and (max-device-width: 375px) and (max-device-height: 667px) {

}

/*iPhone 6 Plus (Standard View):*/
@media screen and (max-device-width: 414px) and (max-device-height: 776px) {

}

/*iPhone 6 (Zoom View):*/
@media screen and (max-device-width: 320px) and (max-device-height: 568px) {

}

/*=== New iPhone Stuff ENDS ===*/

with the aforementioned iPhone 5 stuff removed.

Thank you.