I have an X-Pro Menu with drop-downs set up on a site. It is working fine on large screens, small tablet screens and mobile screens but on a large i-pad pro, the parent pages that have sub menus are not linking to their subsequent pages. It is also not responsive and picking up how a tablet menu should display but is instead showing the full, ‘large screen’ version of the menu. We need to have the links working quickly before we can launch the site. Is there any way to fix this?
Thank you for writing in and sorry you’re having that issue, to clarify are you working on that site below right? You have a number of parent menu items on that site, this particular situation is a matter of reworking your menu items to properly fit the menu items in given bar width. Please consider the following, reducing the top links menu font-size, letter-spacing, and the margin between menu items.
If the issue persists with the iPad Pro, please provide us login credentials in a secure note so we can take a look on your configuration.
It is actually for a different site; I will attach the credentials. Would the width of the menu items be affecting the fact that you can’t click through a menu item link? That is the main issue with menu that we are having.
It is an ipad pro (the size is large enough that is not switching over to the mobile menu style). I think the submenu links are working correctly but the parent pages (About Signet & Our Services) are not linking out to their subsequent pages (we are unable to click them).
I’ve checked your website and I can see you are using “Navigation Collapsed” element, normally, in all the navigation elements in Pro, we don’t support href links for the parent of sub-menu items, more details about that can be found here:
However, I can see the sub-menu parent links are working on your website, after investigating I found that you have this JS code snippet added in Global JS section:
jQuery(document).ready(function($){
$('.x-off-canvas .x-anchor-menu-item .x-anchor-text').on('touchend click', function(e) {
var link = $(this).parents('.x-anchor-menu-item').attr('href');
window.location.href = link;
});
});
I know that you might find this snippet on one of the forums threads like this one for example:
As you can see in the last reply on that thread Christopher tried hardly to get this snippet to work on all devices:
You might give that a try but to get a fully working solution you will have to wait for a next release that we implement this feature in, or you can hire a developer to integrate this feature (that we don’t have currently) into the theme for you.
Unfortunately it seems like it didn’t work – we are going to try and come up with another solution rather than the ‘Navigation Collapsed’. Thank you for your help though!