Zainstalowałem taką templatke (freshjoomlatemplates.com/interior-design-template/) ale już nie ma wsparcia i nie działa menu na telefonie. Ogólnie podoba mi się i chciałbym ją naprawić. Po zmniejszeniu okna lub na telefonie pokazuje się kwadracik menu ale po kliknięciu nic się nie dzieje. Wydaje mi się, że coś tu jest nie tak w style.css ale to tylko moja wizja:

Kod:
/*Styles for screen 640px and lower*/
@media screen and (max-width: 639px) { 
nav { height: auto ; right: 15px; top: 0px; letter-spacing: 0;margin:0;position: relative;z-index: 10; margin: 0 4px 0 30px;}
nav ul { width: 100%; display: block; height: auto;}
nav li{ width: 50%; float: left; position: relative; z-index:10;}
nav ul li a {display: block; padding: 25px 20px;color: #757575; text-decoration: none;}
nav li a { border-bottom: 1px solid #cccccc; border-right: 1px solid #576979; }
nav a { text-align: left; width: 100%; text-indent: 15px; }
nav ul  { display: none; height: auto; }
nav a#pull { display: block; background-color: #283744; width: 100%; position: relative;}
nav a#pull:after { content: ""; background: url(../images/nav-icon.png) no-repeat; width: 20px; height: 20px; display: inline-block; position: absolute; top: -20px; right:0;}
#nav {display:none;}
#nav a {background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec)); background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%); background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%); background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%); background: linear-gradient(top, #fefefe 0%, #ececec 100%); color: #000; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 47px; padding: 0 10px; text-decoration: none; }
#nav ul {margin-left: 0px; padding:0; float:left; height:24px; list-style: none}
#nav ul li {list-style:none;float:left;position:relative; padding-right:0px 20px; margin:0; margin-right:5px; }
#nav ul li a {color: #555555;display: block;font-family:  'Alegreya Sans', sans-serif;font-size: 14px;font-weight: normal;padding: 0;text-align: left;text-shadow: none; border-right:none;}
#nav ul li a:hover { color:#c4c4c4; background:none; text-decoration:none;}
#nav ul li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #db000b; margin-left: -10px; }
#nav ul li:first-child > a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; }
#nav ul li.active > a { -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); background: #ececec; background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); }
#nav ul li:hover > a { background: #ececec; background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); }
#nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0; }
#nav ul li ul:hover  {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0; }
#nav ul li:hover ul {left:0;}
#nav ul ul ul{display:none;}
#nav ul li ul li:hover ul {left:100%; top:0; display: block;}
#nav ul li:hover ul {left:100%; top:0; display:none;}
#nav ul li:hover ul li a {border-radius:0; border:none;}
#nav ul li:hover ul li ul li a {border-radius:0; display:none;}
#nav ul li ul li:hover ul li a {border-radius:0; display:block;}
.slogan {left:8px;}
#bottomwide {margin:0 11px;}
#rightbar-w {width:100%;}
#leftbar-w {width:100%;}
#centercontent_both {width:100%;}
#main-content {padding:0;}
#wrapper {padding:padding: 15px 3px;}
.cols-3 .column-1 , .cols-3 .column-2, .cols-3 .column-3 {width:98%;}
}
Bardzo poproszę dobrych ludzi z większym doświadczeniem o pomoc bo już dwa dni z tym walczę i nie mogę naprawić. Chciałbym przywrócić to menu do życia na mobilach.