How to make tiny nav work for tablets ipad ect...

[saucey]

www.webcodeworks.co.uk

Heres my test site above, ive managed to get the tiny nav working but its does change into select on ipads, only on mobiles, does anyone know were i could get this to work for all devices?

Kind Regards

[reececropley]

You have this code at the top of your file

@media only screen and (max-width: 600px) {
      .tinynav { display: block }
      #nav, #nav2 { display: none }
    }

This is a media query that kicks in when the screen width is 600px. Change the 600 to 768 (iPad portrait) or 1024 (iPad landscape) This will start the tinynav at those dimensions.

[saucey]

Ok I will have a try, but should the query work for ALL screens with a max width of 600, I do not see why it needs changing, if I changed the body background color or any other selector it responds, just not the nav Sent from my BlackBerry® smartphone

-----Original Message----- From: reececropley notifications@github.com Date: Mon, 03 Jun 2013 23:27:02 To: viljamis/TinyNav.jsTinyNav.js@noreply.github.com Reply-To: "viljamis/TinyNav.js" reply@reply.github.com Cc: sauceyleo@designanddev.co.uk Subject: Re: [TinyNav.js] How to make tiny nav work for tablets ipad ect... (#42)

You have this code at the top of your file

@media only screen and (max-width: 600px) {
      .tinynav { display: block }
      #nav, #nav2 { display: none }
    }

This is a media query that kicks in when the screen width is 600px. Change the 600 to 768 (iPad portrait) or 1024 (iPad landscape) This will start the tinynav at those dimensions.

---

Reply to this email directly or view it on GitHub: https://github.com/viljamis/TinyNav.js/issues/42#issuecomment-18891391

[saucey]

hi ived gone and tried all these quires and none of them work, 1 of them removes the current nav but doesnt display anything

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

}

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

}

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

}

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

}

/* #### Tablets Portrait or Landscape #### / @media screen and (min-device-width: 768px) and (max-device-width: 1024px){ / some CSS here */

}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ .tinynav { display: block }

nav, #nav2 { display: none }

}

[reececropley]

If the screen size is equal to or less than 600 then it should show up. You should be alright removing these queries and adding just the following for iPad

@media only screen and (max-width: 1024px) {
      .tinynav { display: block }
      #nav, #nav2 { display: none }
    }

Im not too sure how Blackberry work, never worked with them but perhaps they dont have javascript enabled.

[saucey]

It works fine on my blackberry phone just doesn't work on tablets, I've only tested it on an ipad tablet and its not displaying handheld iphones and normal phones work fine Sent from my BlackBerry® smartphone

-----Original Message----- From: reececropley notifications@github.com Date: Tue, 04 Jun 2013 00:50:30 To: viljamis/TinyNav.jsTinyNav.js@noreply.github.com Reply-To: "viljamis/TinyNav.js" reply@reply.github.com Cc: sauceyleo@designanddev.co.uk Subject: Re: [TinyNav.js] How to make tiny nav work for tablets ipad ect... (#42)

If the screen size is equal to or less than 600 then it should show up. You should be alright removing these queries and adding just the following for iPad

@media only screen and (max-width: 1024px) {
      .tinynav { display: block }
      #nav, #nav2 { display: none }
    }

Im not too sure how Blackberry work, never worked with them but perhaps they dont have javascript enabled.

---

Reply to this email directly or view it on GitHub: https://github.com/viljamis/TinyNav.js/issues/42#issuecomment-18894045

[reececropley]

in your styles.css remove lines 60 to 83, then with what remains change it with what i wrote in my previous comment. I have tested this and it works.

[saucey]

Ok I'm not at the comp right now, will check and let you know thanks shortly. Thx

Sent from my BlackBerry® smartphone

-----Original Message----- From: reececropley notifications@github.com Date: Tue, 04 Jun 2013 01:52:19 To: viljamis/TinyNav.jsTinyNav.js@noreply.github.com Reply-To: "viljamis/TinyNav.js" reply@reply.github.com Cc: sauceyleo@designanddev.co.uk Subject: Re: [TinyNav.js] How to make tiny nav work for tablets ipad ect... (#42)

in your styles.css remove lines 60 to 83, then with what remains change it with what i wrote in my previous comment. I have tested this and it works.

---

Reply to this email directly or view it on GitHub: https://github.com/viljamis/TinyNav.js/issues/42#issuecomment-18896590

[saucey]

Ok ive tried to change the query but im having trouble with it, would it be possible for you to post the query.

Kind Regards

On Tue, Jun 4, 2013 at 11:22 AM, leo@designanddev.co.uk wrote:

** Ok I'm not at the comp right now, will check and let you know thanks shortly. Thx

Sent from my BlackBerry® smartphone

From: * reececropley notifications@github.com Date: Tue, 04 Jun 2013 01:52:19 -0700 To: viljamis/TinyNav.jsTinyNav.js@noreply.github.com ReplyTo: * "viljamis/TinyNav.js" < reply@reply.github.com>

Cc: sauceyleo@designanddev.co.uk Subject: Re: [TinyNav.js] How to make tiny nav work for tablets ipad ect... (#42)

in your styles.css remove lines 60 to 83, then with what remains change it with what i wrote in my previous comment. I have tested this and it works.

— Reply to this email directly or view it on GitHubhttps://github.com/viljamis/TinyNav.js/issues/42#issuecomment-18896590 .

[reececropley]

Replace (line 58 of styles.css):

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
.tinynav { display: block }
nav, #nav2 { display: none }

}

    /* styles for desktop */
    .tinynav { display: none }
    #nav .selected a, #nav2 .selected a { color: red }
    /* styles for mobile */

with:

/* styles for desktop */
    .tinynav { display: none }
    #nav .selected a, #nav2 .selected a { color: red }
    /* styles for mobile */

@media (max-width: 1024px) {/* Styles */.tinynav { display: block } #nav, #nav2 { display: none }
}

This will start the tinynav at 1024 px

[saucey]

Thanks il take try it out

Sent from my iPad

On 4 Jun 2013, at 14:17, reececropley notifications@github.com wrote:

Replace (line 58 of styles.css):

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ .tinynav { display: block } nav, #nav2 { display: none }

}

/* styles for desktop */
.tinynav { display: none }
#nav .selected a, #nav2 .selected a { color: red }
/* styles for mobile */

with:

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */

@media (max-width: 1024px) {/* Styles */.tinynav { display: block } #nav, #nav2 { display: none } } This will start the tinynav at 1024 px

— Reply to this email directly or view it on GitHub.

[saucey]

Why have you removed "only screen" from the example you want me to try? is there any reason for this, I thought it was needed

Kind regards

Sent from my iPad

On 4 Jun 2013, at 14:17, reececropley notifications@github.com wrote:

Replace (line 58 of styles.css):

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ .tinynav { display: block } nav, #nav2 { display: none }

}

/* styles for desktop */
.tinynav { display: none }
#nav .selected a, #nav2 .selected a { color: red }
/* styles for mobile */

with:

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */

@media (max-width: 1024px) {/* Styles */.tinynav { display: block } #nav, #nav2 { display: none } } This will start the tinynav at 1024 px

— Reply to this email directly or view it on GitHub.

[reececropley]

Only screen just means that it will only work on screen devices rather than print, leaving it blank applies to all (don't quote me on that). I never define screen/print/only screen.

Did you get it working?

Sent from my iPad

On 4 Jun 2013, at 18:15, "saucey" notifications@github.com wrote:

Why have you removed "only screen" from the example you want me to try? is there any reason for this, I thought it was needed

Kind regards

Sent from my iPad

On 4 Jun 2013, at 14:17, reececropley notifications@github.com wrote:

Replace (line 58 of styles.css):

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ .tinynav { display: block } nav, #nav2 { display: none }

}

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */ with:

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */

@media (max-width: 1024px) {/* Styles */.tinynav { display: block } #nav, #nav2 { display: none } } This will start the tinynav at 1024 px

— Reply to this email directly or view it on GitHub. — Reply to this email directly or view it on GitHub.

[saucey]

Yes I've got it to work with the code you sent me, but if I change the max width to anything lower than 1024px it doesn't seem to work, so the breaking points quiet heigh, but I thought iPads and tablets respond to 768px I even tried 959px

Sent from my iPad

On 4 Jun 2013, at 18:20, reececropley notifications@github.com wrote:

Only screen just means that it will only work on screen devices rather than print, leaving it blank applies to all (don't quote me on that). I never define screen/print/only screen.

Did you get it working?

Sent from my iPad

On 4 Jun 2013, at 18:15, "saucey" notifications@github.com wrote:

Why have you removed "only screen" from the example you want me to try? is there any reason for this, I thought it was needed

Kind regards

Sent from my iPad

On 4 Jun 2013, at 14:17, reececropley notifications@github.com wrote:

Replace (line 58 of styles.css):

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ .tinynav { display: block } nav, #nav2 { display: none }

}

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */ with:

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */

@media (max-width: 1024px) {/* Styles */.tinynav { display: block } #nav, #nav2 { display: none } } This will start the tinynav at 1024 px

— Reply to this email directly or view it on GitHub. — Reply to this email directly or view it on GitHub. — Reply to this email directly or view it on GitHub.

[reececropley]

They should respond to anything above 768px if the device is portrait

---

From: saucey Sent: 04/06/2013 18:39 To: viljamis/TinyNav.js Cc: reececropley Subject: Re: [TinyNav.js] How to make tiny nav work for tablets ipad ect... (#42)

Yes I've got it to work with the code you sent me, but if I change the max width to anything lower than 1024px it doesn't seem to work, so the breaking points quiet heigh, but I thought iPads and tablets respond to 768px I even tried 959px

Sent from my iPad

On 4 Jun 2013, at 18:20, reececropley notifications@github.com wrote:

Only screen just means that it will only work on screen devices rather than print, leaving it blank applies to all (don't quote me on that). I never define screen/print/only screen.

Did you get it working?

Sent from my iPad

On 4 Jun 2013, at 18:15, "saucey" notifications@github.com wrote:

Why have you removed "only screen" from the example you want me to try? is there any reason for this, I thought it was needed

Kind regards

Sent from my iPad

On 4 Jun 2013, at 14:17, reececropley notifications@github.com wrote:

Replace (line 58 of styles.css):

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ .tinynav { display: block } nav, #nav2 { display: none }

}

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */ with:

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */

@media (max-width: 1024px) {/* Styles */.tinynav { display: block } #nav, #nav2 { display: none } } This will start the tinynav at 1024 px

— Reply to this email directly or view it on GitHub. — Reply to this email directly or view it on GitHub. — Reply to this email directly or view it on GitHub.

---

Reply to this email directly or view it on GitHub: https://github.com/viljamis/TinyNav.js/issues/42#issuecomment-18925984

[saucey]

Il have some more plays with it and let you know

Sent from my iPad

On 4 Jun 2013, at 19:12, reececropley notifications@github.com wrote:

They should respond to anything above 768px if the device is portrait

---

From: saucey Sent: 04/06/2013 18:39 To: viljamis/TinyNav.js Cc: reececropley Subject: Re: [TinyNav.js] How to make tiny nav work for tablets ipad ect... (#42)

Yes I've got it to work with the code you sent me, but if I change the max width to anything lower than 1024px it doesn't seem to work, so the breaking points quiet heigh, but I thought iPads and tablets respond to 768px I even tried 959px

Sent from my iPad

On 4 Jun 2013, at 18:20, reececropley notifications@github.com wrote:

Only screen just means that it will only work on screen devices rather than print, leaving it blank applies to all (don't quote me on that). I never define screen/print/only screen.

Did you get it working?

Sent from my iPad

On 4 Jun 2013, at 18:15, "saucey" notifications@github.com wrote:

Why have you removed "only screen" from the example you want me to try? is there any reason for this, I thought it was needed

Kind regards

Sent from my iPad

On 4 Jun 2013, at 14:17, reececropley notifications@github.com wrote:

Replace (line 58 of styles.css):

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ .tinynav { display: block } nav, #nav2 { display: none }

}

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */ with:

/* styles for desktop _/ .tinynav { display: none }

nav .selected a, #nav2 .selected a { color: red }

/_ styles for mobile */

@media (max-width: 1024px) {/* Styles */.tinynav { display: block } #nav, #nav2 { display: none } } This will start the tinynav at 1024 px

— Reply to this email directly or view it on GitHub. — Reply to this email directly or view it on GitHub. — Reply to this email directly or view it on GitHub.

---

Reply to this email directly or view it on GitHub: https://github.com/viljamis/TinyNav.js/issues/42#issuecomment-18925984 — Reply to this email directly or view it on GitHub.