Off Canvas navigation menu, closing after click unless it’s a sub-menu heading

Support
#1

I basically have the same question as this guy: https://theme.co/apex/forum/t/collapsed-navigation-menu-closing-after-click-unless-its-a-sub-menu-heading/15070

But with a little twist.

For the mobile menu items that have children (submenu) I’d like to allow the initial click to open the submenu, but if that top-level item is clicked again I’d like for the menu to close and the page navigate to the #anchor that is set on that top-level menu item.

It should be easy to target the menu items that have submenus with the .menu-item-has-children class.

I’m using this code right now to make the menu collapse when menu items with one-page nav are clicked and it’s working great:

$(’.home .x-off-canvas .x-anchor’).on( “click touchstart”, function() {
if ($(this).attr(‘href’).indexOf(’#’) !== -1) {
$(’.x-off-canvas-close’).click();
}
});

I just need to add that extra bit of functionality for the menu items that have submenus.

#2

Hi there,

The functionality that you need is not part of our theme out of the box and it will need more detailed Javascript code and is consideed as custom development and outside of our support scope.

We will try to give you suggestions on how to proceed if you give the URL of your website to tailor the suggestion for your case but we will not be able to implement the code for you.

Please kindly get back to us with the URL of your website to follow up the case.

Thank you.

#3

Here’s the URL: http://367.531.myftpupload.com

Thanks.

#4

Hi there,

Seems like what you’re trying to do is a toggle click, I can test something our but your off canvas has no sub-menu. I recommend contacting a developer, it’s a bit tricky which usually can result in javascript memory loop/leakage and may crash your browser if not done well.

Thanks!

#5

Hello,

I changed the mobile menu back to one with submenus. I appreciate you testing something for me.

#6

Hi again,

You should replace your code with the following code:

jQuery(document).ready(function($){
	$('.home .x-off-canvas .x-anchor').on("click touchstart", function(event) {
		if ($(event.target).attr('class') != "x-anchor-sub-indicator") {
			$('.x-off-canvas-close').click();
		}
	});
});

If you click on the sub menu indicator (the down arrow sign) this will open the sub menu and it won’t close the menu.

Hope this helps!

#7

Hello,

I tried this code and it didn’t work. When clicking on the submenu indicator, the submenu does not appear, and the page navigates to the anchor tag in the background.

#8

Hi again,

I checked your site and I still see the old code, this could be the cache issue, please clear all cache (Plugin + Cloudflare + Server) If you’re using any, just clear the cache and make sure to remove the previous code and use the above one or you can use this one too:

jQuery(document).ready(function($){
	$('.home .x-off-canvas .x-anchor').off( "click touchstart").on("click touchstart", function(event) {
		if ($(event.target).attr('class') != "x-anchor-sub-indicator") {
			$('.x-off-canvas-close').click();
		}
	});
});

Let us know how this goes!

#9

I removed the code because it wasn’t working.

This new code is now in place and it’s still not working. I left the code in this time. Check it out when you get a chance.

Thanks for your help!

#10

Hi again,

I tested the menu again in mobile device and it doesn’t work indeed however if we resize the screen in desktop it works as expected. Try replacing the above code with this:

jQuery(document).ready(function($){
	$('.home .x-off-canvas .x-anchor').off( "click touchend").on("click touchend", function(event) {
		if ($(event.target).attr('class') != "x-anchor-sub-indicator") {
			$('.x-off-canvas-close').click();
		}
	});
});

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

#11

That’s not working either. The functionality of clicking on the sub-indicator and getting the dropdown action is working, but on mobile clicking on any of the menu items directs you to the main domain rather than the anchor on the page (I’m currently working on a staging server).
On desktop clicking any of the menu items just closes the menu without navigating to the anchor.

#12

Hey There,

Please update it to this:

jQuery(document).ready(function($){
    $('.home .x-off-canvas .x-anchor').each(function(){
        $(this).on("click touchend", function(event) {
            if ($(event.target).attr('class') != "x-anchor-sub-indicator") {
                $('.x-off-canvas-close').trigger('click');
            }
        });
    });
});

Hope this helps.

#13

This isn’t working either. Check it out.

#14

Hey There,

Regretfully this is way more complicated. All efforts have been done by our staffs. What you have wanted is beyond our support capability as it need a custom JS coding. As Christopher already mentioned in his first reply, we may be able to help or not since this is not part of the theme out of the box.

We have tried our best and simply it is not enough and possible at this moment. What you really wanted need a more sophisticated code to do it. We’ve added what you wanted as a feature request so it can be taken into consideration for future development.

Thank you for your understanding.

#15

No problem. I totally understand and I really appreciate you guys giving it a shot.
And thanks for adding it as a feature request. Definitely needed.

#16

You’re most welcome!

#17

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