Menu inaccessible on iphone 4S

On the iPhone 4S, the collapsed menu icon on the side is inaccessible.
It shows up, but it cannot be selected.
Instead, the screen selects the "login" button and opens the login modal window.

The only way to get to the menu on the 4S is to zoom in on the menu icon, select the icon, and then zoom back out. Otherwise only the login box is accessible. A CSS issue I guess, but not sure how to resolve it.
(Yeah, I know I need to upgrade my phone) Works great on the ipad mini and the Surface.

Love the theme, the very best ever made on gavick. (this minor glitch aside of course). It is the most polished and well design and flexible of all the templates.

Anyways, any ideas how to fix? Website live at timocoyle.com

Please verify if same problem happens on our demo server.

Hi Cyberek, Yes, I just tried on the demo server and the same problem exists

Ok, I'll report this bug to our devteam and write back as soon as I get an answer.

Great, we're about to go live next week and any news would be awesome.

It will be fixed with next template release, meanwhile, please edit this file:
/templates/gk_technews/less/template.less
find this part (around 276 line):

Code: Select all

   & > .micon {
      color: @silver_light;
      cursor: pointer;
      float: right;
      font-size: 2.6rem;
      height: 62px;
      line-height: 62px;
      padding: 0;
      width: 62px;
   }


and add one line so it looks this way:

Code: Select all

   & > .micon {
      color: @silver_light;
      cursor: pointer;
      float: right;
      font-size: 2.6rem;
      height: 62px;
      line-height: 62px;
      overflow: hidden;
      padding: 0;
      width: 62px;
   }


Now make sure recompile less files is enabled in template settings and reload template from the frontend.
After that new css files will be generated and fix will work.
Ps. If you have any changes in override.css they will be erased so backup this file first if you are using it.

Excellent. Thanks Cyberek and great job on follow up and instructions. Now functioning as intended.

Is there anything else I can help you with regarding this topic?

We're good, that solved the problem

Feel free to post new forum threads if you have any other questions.

Please note that if you do what's described above, the template's colors will get back to default. I just did it because I had the same problem with menu, but I recommend making a backup of the template.css file if you've been modifying it;-)

That's true. But the solution should also be implemented into template itself soon so it won't be problematic anymore.

Ok, I got and info that with next template release the fix will be included.

Same problem, but also on iPad mini, iPad, iPhone 5 and 6 too. I try the solution explained, but if there is the "recompile less file" is enabled, I can't change the template.css file: if I modify any part of template.css it will return at the original version, also if it's modified from browser or using a ftp software.

I try this:
- upload last version of the template
- modify template.css file
- saved my modify template.css file
- switched "recompile less file" to enable
- checked/modify template.less file as described
- upload my modified template.css file

Result: responsive menu works on portable devices, but the template automatically reload the old (original) version of template.css file... how can I solve this problem?

Have a nice week-end!!

Pippo

Because if recompile less files is enabled less files are the ones you should edit - .css files are being generated as a final product. So either disable less compilation and edit .css files (or override.css which could be better), or stay with less compilation enabled but edit .less files.

Show template menu -> enabled