Update:
I made the menu background opaque, but it made no difference. The drop down menu text appears BEHIND the main menu bar text on the iPad. Weird.
Is there a way I can force the z-depth of the drop down menu to be above the main menu bar?
Thanks in advance for any suggestions!
– Paul
Another update:
I’ve tried adding some z-index: (with various values) in the style.css (of my child theme) to:
.navbar-inverse .navbar-nav > li > a {...
.navbar {...
.dropdown-menu {...
…but with no effect.
Should I ignore these; does the theme look at the CSS within the @media (max-width: 767px) section when the window is 767 pixels wide or less? I’ve tried adding various z-indexes in here too, but again , with no effect. The problem seems to be that in all non-iOS browsers, the remaining menu text gets shifted down, out of the way, when the dropdown menu appears. But on the iPad, the other menu items remain fixed, clashing with the dropdown text.
– Paul
OK – so this is a fault inherent in this theme. If you go to the developer’s website demo of this theme (demo.opencodez.com/openstrap/) and look at the menus in portrait mode on an iPad mini, they’re totally screwed up, and it’s not possible to select anything properly. So I’m guessing that the chances of this being fixed easily are close to zero. How annoying that I chose to develop my site on a defective theme. Pavan, if you’re reading this – what are the chances that this will get fixed in an update? Please?!
Hi PaulDoesWP
I tried to access your mentioned site but it seems some database error.
Sorry for any inconvenience caused, but did you try setting menu open on click instead of mouse hover. See if that helps.
Acutally I dont have any Ipad mini at my disposal to test. I am trying to use online emulator available http://www.responsive.com.au/tools/simulator/ipad-mini/
Also let me know when your site is up so I can have a look.
Hi Pavan,
That version of the site has been replaced by a more recent one:
http://paulroper.com/ccfm14/
…but the problem is still there. Also, the same problem exists on your site’s demo:
http://demo.opencodez.com/openstrap/
…(both when viewed in portrait mode).
From what I’ve read about most online iPad/iPhone simulators, they don’t actually emulate the iOS, but just put the site in a specific sized window and run it through the default browser’s renderer, so it’s not a true indication of how it will work on an iOS device.
I’ve already got the menu set to appear on click, not hover; maybe I’ll try setting it to the hover behaviour to see if it has any effect.
I’m running iOS 6.0.1 on my iPad mini. Maybe I’ll have to downgrade to iOS7 to see if the problem persists.
Thanks for your help so far,
Paul
I see you have background property with opacity .85 for class .dropdown-menu
Can you try making it 1?
I tried that – it made no difference. The text is all rendered above the background. I’ve now got that opacity set to 1 if you want to take a look.
– Paul
I’ve just checked with a friend who is unfortunate enough to have installed iOS7 on their iPad and iPhone, and the menus work perfectly, which is fantastic news.
That does mean that 13% of iPad/iPhone users will get a garbled menu (apparently the uptake of iOS7 is around 87% currently). But at least it’ll be ok for the majority of users.
– Paul
