Responsivni menu mi ne radi na mobitelima

Programiranje
1

Krenuo sam radit jednu staru stranicu da bude responsive i zapeo sam na meniju, pa ako netko može pomoći bio bih zahvalan. Naime, o čemu se radi, sve sam podesio da se menu smanji kako je to potrebno za prikazivanje na mobitelima i kad na kompjuteru smanjim ekran uredno radi, ali kad pokušam taj isti menu pogledati na mobitelu onda mi neće otvorit.
Evo tu CSS kod, pa ako netko zna kako riješiti ovaj problem spasio bi mi puno živaca.

CSS kod:

@charset "windows-1250";
/* CSS Document */

/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	text-transform: uppercase;
 	font-weight: bold;
}
/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	float: left;
	margin-right: 1px;
	float: left;
 min-height: 1px;
 line-height: 1em;
 vertical-align: middle;
}

/*Style for menu links*/
li a {
	display:block;
	min-width:auto;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	background: #427308;
	text-decoration: none;
	padding: 7px 14px;
}
/*Hover state for top level links*/
li:hover a {
	color: #FEDF06; text-decoration: none;
}

/*Style for dropdown links*/
li:hover ul a {
	min-width: 170px;
	 background-color: #427308;
	 color: #fff;
	 font-size: 13px;
	 text-transform: none;
	 filter: alpha(opacity=90);
	 -moz-opacity: .9;
	 KhtmlOpacity: .9;
	 opacity: .9;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
	background-color: #FEDF06;
		 color: #427308;
		 filter: none;
}

/*Hide dropdown links until they are needed*/
li ul {
	display: none;
}

/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
li ul li a {
	width: auto;
	padding: 0 10px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: uppercase;
	color: #fff;
	background: #427308;
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

.show-menu {
	display: none;
}
/*Responsive Styles*/

@media screen and (max-width : 780px){
	/*Make dropdown links appear inline*/
	ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	li {
		margin-bottom: 1px;
		float: none;
		width: auto;
	}
	/*Make all menu links full width*/
	ul li, li a {
		width: 100%;
	}
	li:hover ul {
		width: 100%;
		}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
		margin-left: 10px;
	}
}

U HTML kod sam stavio ovaj kod prije početka menija:

label for="show-menu" class="show-menu">Menu /label>
	
input type="checkbox" id="show-menu" role="button"
2

Imaš li stranicu online da pogledamo? ovako teško samo uz CSS shvatiti u čemu je problem, predugo bi trajalo. osim ako netko ima baš puno vremwna proučavati opet moguće da nebi našao ništa suvislo samo u CSS-u

3

evo stavio sam samo meni na ovom linku

http://www.kucnilijecnik.net/proba/index.html

4

jel zna netko gdje je greška u ovom meniju?

5

ne radi jer je to ustvari nekakav check box koji je sakriven… koliko vidim, ima li nakakva skripta ili samo CSS?

6

nema skripte, samo je to što sam stavio tu. imaš li neko rješenje?

7

/Show menu when invisible checkbox is checked/
input[type=checkbox]:checked ~ ul{
display: block;
}

očito ovo ne prepoznaje mobitel

8

to sam i ja skužio, sad mi treba nešto umjesto toga da radi i na mobitelu

9

Meni radi na Samsung S4 sasvim normalno.

10

ja nažalost imam stariji samsung i na njemu ne radi, a dok ne radi na svima znači da je neka greška u pitanju

11

Jedino što mi pada na pamet je da probaš ovo:

<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">

prepisati u ovo:

<label for="show-menu" class="show-menu">Menu
<input type="checkbox" id="show-menu" role="button">
</label>
12

Niti kod mene na S3 ne radi, možeš dodati ovo između < head> i < /head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    
$(document).ready(function(){
    document.getElementById('show-menu').onchange = function() {
    document.getElementById('main_menu').style.display = this.checked ? 'block' : 'none';
    };

});
</script>

i tamo gdje je:

<ul class="menu">

zamjeni sa

<ul class="menu" id="main_menu">
13

@costlyDeveloper hvala ti, ovo izgleda da radi