Menu Link on Joomla Site not working on iPhone 6 Plus

Question

I am trying to workout why my menu on my Joomla website does not work properly specifically on an iPhone 6 Plus in landscape mode. I have tested this on my computer with the same viewport and I have no issues but I have been told a few times by friends/colleagues of this issue and I am kind of struggling to workout why this is happening and how i can fix it.

If somebody could please advise on any other methods that I could try to help fix this as unfortunately I don't have an iPhone 6 Plus to actually see this issue.

The site can be viewed at http://www.leicesterbakery.co.uk

Answer 1

I can confirm that for me the mobile menu wasn't working on an iPhone 6 Plus either.

When I clicked on the menu icon it was like focussing on the search box.

I think I have the solution.

In your CSS file at http://www.leicesterbakery.co.uk/templates/lbakery/css/custom.css , go to line 1018 and edit the width of the .search class from 80% to something lower.

In my tests, the following worked well.

.search {
    width:70%;
    float:left;
    margin-top:20px;
}  

After making the above change the mobile menu worked for me on an iPhone.

Good luck!