Issue with Mobile Nav Menus

Support
#1

Hello. My nav menu is not working on tablet/mobile views. On all pages with dropdowns, the parent doesn’t open when I click on the link, only the child pages open. I’m only displaying the toggle on tablet/mobile. On all other devices, my nav menus/links work fine. I can’t seem to figure this one out. Please advise. The website is edenequipment.com. Thank you

#2

Hey there,

That is the intended behavior of nav menu. If you need more option or complex menu setup, you might want to use UberMenu which also comes bundled in Pro. See https://theme.co/apex/forum/t/extension-ubermenu/75 for more details.

Thanks.

#3

Thank you for your response. I do not want to use Uber Menu. I rather create a new menu for tablets & mobile devices. I’m looking at the “SAMPLE” menu in the Setup. One of the links is “WORK See Projects”. How do I create this (fixed title) ? If I use the same format, I can add my pages as a dropdowns. If not, I’ll stack all pages. Thank you

#4

Hi There,

Yes, as of the moment, main link will just show submenu link. We have plans on making the submenu indicator to open/show summenu links and making the parent go to it’s link. We will let you know once we have an update.

Can you clarify which fixed title it is? Those subtitle below each link can be added on Appearance > Menu: Description textfield. See screen option if you don’t see description field.

1 Like
#5

That is a highly disappointing answer… I’m having the same issue as the original poster.

#6

Hey there,

Thanks for writing around! Can you please share the URL of your site so we can take a look?

Thanks!

#7

Hi, thanks for looking into this. Here’s a URL:

http://wolfeislandrecords.com/news/

Also, I’m trying to center the mobile menu items and I sort of got it to work (using Content Flex Layout) in Firefox but not in Chrome or my actual iPhone Safari browser.

#8

By the way, I have since stopped trying to center the mobile items on the current menu, thought it would be nice if it could be done.

#9

Hi again,

Thank you for providing the URL. To fix the parent menu issue, add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

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;
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

1 Like
#10

Hi Nabeel, thanks for that. The link works now, but it also opens the drop-down submenu when I click on the link. Is there any way to separate the functions so that it visits the correct page when clicking on the page name, and only opening the submenu when clicking on the dropdown arrow/chevron?

Thanks,
Carlos

#11

To be more specific, I see that it works as expected on iPhone Safari, but it opens the submenu on Android/Chrome and my Chrome (desktop) browser.

#12

Hey @cgMultimedia,

As you see, this requires custom scripting to achieve what you need. I know you’re disappointed with my reply but this is really currently the case. Further custom development would be outside the scope of our support. We do have an in-house custom development team that offer paid services, who may be able to assist you further.

Thank you for your understanding.