David Hirst David Hirst - 4 months ago 7
CSS Question

Checkbox not visable on Mobiles

I am working on a website for a Uni assignment and I have a strange mobile problem. I have created a checkbox that makes the menu hidden or visible on mobile with the checked function. It works just fine on my computer when I simulate a mobile browser in Chrome or Firefox or by using Resizer.

Although when I view it on a mobile (Android) the checkbox is not visible. I found the same on my tablet although there if I click the right part of the screen the menu appears. Both mobile and tablet are running Chrome for Mobiles though I have also tested it in Opera Mini and have the same problem. It runs fine on PC but isn't visible on Mobiles.

Here is my website: http://wonx.dk/pwdh/

And here is the relevant HTML and CSS:

HTML:

<label for="menuon">&#x2630; &#x25be;</label>
<input type="checkbox" id="menuon">


CSS:

label {
font-size:36px;
}

label:hover {
color:#F03B4E;
}


input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}

/* Checkbox Default State (if deleted menu is always visable) */
nav {
display:none;
}

/* When clicked/Toggled State */
input[type=checkbox]:checked ~ nav {
display:block;
}

Answer

The issue is with &#x2630; and &#x25be; - they are not working on Androids.

For testing purposes, try replacing them with actual words:

<label for="menuon">stripes arrow</label>

Here is a demo: http://jsfiddle.net/sc0rv3na/10/

Try using images, or a special fonts instead, eg Font Awesome.

Here is a Font Awesome implementation: http://jsfiddle.net/sc0rv3na/14/

EDIT: Although that question is about Windows Phones, it basically answers this question too: http://stackoverflow.com/a/21997373/2037924

Unicode characters belong to certain fonts, like Arial Unicode MS and not all fonts support a wide range of Unicode characters.

To ensure that special Unicode characters are shown, you must change the font for the platform.

EDIT #2: Here are a couple of ways to add a mobile menu icon to your site: http://css-tricks.com/three-line-menu-navicon/

Comments