Top level menu links not working when they have a submenu on ipad (touch screens)

Support
#1

I am using X Theme Pro and my site is fobl.org.au. My main menu in both the header and footer have some drop down submenus on some items. These are fine on a desktop/laptop and are not a problem on phones or tablets in portrait mode as the collapsed menu takes over and have got this working.

In lanscape on a touch screen the top-level menu items that have sub-menus items do not work. I have tried making the tp-level items non-clickable and putting all the active links on sub-menu items but them then only the first item shows and the others are hidden behind the page content.

I have read about solutions to the latter work around using z-index values but nothing I try seems to work.

Any suggestion?

Douglas.

#2

Hi Douglas,

Thank you for writing in, but would you mind to clarify the issue? The top links menu on your site works fine on my end, either as a link or as a trigger of the sub-menu. Would you mind providing a screen-cast of what is happening on your end?

The issue that I am seeing is there is a considerable gap between the top links and its sub-links, which you can adjust by reducing the sub-links top margin.



If you want to increase the z-index of your Navigation Collapsed you can add the custom CSS below on the Elements CSS area.

$el {
  z-index:99999;
}



Hope it helps,
Cheers!

#3

Yes, you are right, I have managed to get the menu working on all devices but thanks for your suggestions. I am not sure about the margin settings for the sub-links. When I change these nothing seems to be affected. I would like to reduce the size of the boxes that drop down but it is not critical.

I have re-jigged my menu to only require one drop down so at this stage I have applied your CSS code just in case.

#4

Hi,

You can adjust the width under dropdown set-up

See screenshot

Hope this helps

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.