Touch hitting button under html element

Question

I have the following html and css set up in a phonegap app. I am having an issue where when the "Pay Now" button is covered by the navigation links across the bottom of that page and the user tries to touch one of the navigation links the "Pay Now" button is being pressed instead of the navigation link.

Has anyone come across this before, been able to fix it?

Colner

Answer 1

I have an hacky way you may try once...

Put a transparent rectangle behind the navigation links you have, so that whenever user will touch these links the event will not land on your "Pay Now" button,

Best of luck ....

Thibodeau

Would the containing div#menu not already be doing this? Not forgetting the containing ul and li that the link is in? – Colner

Answer 2

Set the menu's z-index value to a higher value in the page, precisely in (div#menu ul) rule

Enclave

The z-index is set to 10 on div#menu. Would that not raise the z-index of that div's contents? – Colner

indeed it will raise the div content, but I as mentioned, try to apply that rule in (div#menu ul) – Enclave