Website not correct on ipad or iphone

[mcolton]

my site: lotatennis.com works fine on IE11 and Chrome. My wife pulled it up on her ipad and iphone and the blue menu bar was missing 7 tabs.
Only the first tab "HOME" and the last tab "Tennis Videos" were there.

How can I program my site to look ok on all devices

[molendijk]

It's missing because it is replaced with a hamburger menu on smaller screens, tap/click on the icon with the three horizontal bars at the top (right).

[mcolton]

Thanks for a reply. I don't use an ipad. Don't know what a hamburger menu is.
I somehow managed to get to the website on my wife's ipad and I don't see the 3 horiz bars. I know what THAT looks like from google maps

[jscheuer1]

I can see the evidence of the problem in the emulator, but I'm not sure how to fix it. I cannot easily make a mockup because your page uses an AJAX include for the menu contents. I can see one potential issue, though I have no idea if this is the cause. I see two versions of jQuery on the page. That can sometimes cause all sorts of odd problems. Try getting rid of:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

That may or may not prevent the slideshow from working, but if it does we can worry about that later. Even if you don't see any changes, leave it like that until I can check it out. Or make a copy of it that way that I can check out. Oddly, on the video page I don't see this problem in the emulator. It also has two versions of jQuery, but the other version is different, older, and comes before the menu on that page. Whereas the one I want to try taking away on the newindex4.htm page is a later version and comes after the one used by the menu.

[mcolton]

I took out the 1 script line you told me to. Everything still seems to work correctly.
BTW, the website is now online at lotatennis.com and the main file is named index.htm.

I just looked at my wife's ipad and the menu is now correct. WOW

[styxlawyer]

Viewing on Windows with both Opera (V43) and Firefox (V52), there is a slight problem with your menu. The sub-menu for "All About LOTA" is in front of the slide show but the sub-menus for both "LOTA Recreational Tennis" and "Tournament" are behind the slide show. I think you still have a z-index anomaly somewhere.

[jscheuer1]

Viewing on Windows with both Opera (V43) and Firefox (V52), there is a slight problem with your menu. The sub-menu for "All About LOTA" is in front of the slide show but the sub-menus for both "LOTA Recreational Tennis" and "Tournament" are behind the slide show. I think you still have a z-index anomaly somewhere.

It's hard to tell, but you're right. I looked at the DOM inspector and the setting in the script for 1001 is just the top z-index. It decrements down from there for each drop down menu item as you go from left to right. So in the script it should be set to like 1100 instead of 1001.

[mcolton]

done. works great. Thanks agaaaaaaaaain

[styxlawyer]

Yes, that has fixed it.

[jscheuer1]

Another thing I noticed while I was in the console for this page is that http://lotatennis.com/jquery.touchSwipe.min.js is a 404 not found. I sort of hesitate to mention it because it's a bit of a fine point. What it means is that the swipe actions on the slideshow will not work as intended. However, I cannot be certain after the other change we made (dropping the more recent version of jQuery) that including jquery.touchSwipe.min.js will work to reinstate that capability, though it's worth a try. In any case, it's not crucial, but if you decide you don't want it, or if we cannot get those actions working, it would probably be best to remove the line:


<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

[molendijk]

I somehow managed to get to the website on my wife's ipad and I don't see the 3 horiz bars. I know what THAT looks like from google maps
It's probably visible on your wife's iphone. You can also see it on your computer when you resize the window (make it very small).