Navigation Collapsed - Selecting items that have sub-links

Hi, this mightn’t be a support issue so much as a user knowledge issue :grinning:

When I use a Navigation Collapsed element in my header, I have some items in the top level of the menu that lead directly to pages (e.g. Home, Contact, etc) and others that have sub-items as well (e.g. About, What We Do). My question relates to items that have sub-items as well as leading to a page (e.g. About)

When using a full navigation element (i.e. on a desktop), I can either click on the top item itself and go to, say, the About page, or I can click on the Sub-Indicator and reveal the sub-items.

When using the Navigation Collapsed element on either the screen size simulator or, indeed, on a mobile device, if I touch the top level link, it reveals the sub-items. Touch it again and the sub-items disappear. It looks like I cannot have the top level items pointing to a page - I am unable to choose the page that it points to.

I hope that makes sense!

Cheers
Neil

Hey Neil,

Yes, that is the intended behavior. If you need more menu options, you might want to use UberMenu instead.

Thanks.

1 Like

I have run into the same issue. Is there a way around this - to make the top level links clickable to their pages rather than just opening and closing their sub menu?

Its seems rather strange to have a top level links clicakble to pages on the desktop, but then take that away on mobile.

Hi @sas313 ,

Thanks for writing around! To make the top links clickable, please 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!

Thanks. That did the trick.

1 Like

Glad we could help.

Cheers!