Nav Collapsed - Auto close after selection

Hi, looking to have mobile navigation close after the menu item is clicked. This is really only an issue when the destination is on the same page because obviously a new page would be loaded if the destination is a different page.
I saw a previous thread about it but just don’t know how to fit the js to my navigation element.

thanks!

Hi @clefler,

The code given in the reference thread has been given based on the structure of the site specified there, which may not match with your site structure. That’s why it is not working at your end.
The following thread may be helpful to you on this.

  1. Navigation Collapsed one page
  2. Navigation Inline doesn't hide after click
  3. PRO - Navigation Collapsed model in header will not close on a mobile when you click a link

If none of the above helps, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

I tried all of the code samples and can’t get it to work.

Hi @clefler,

You don’t need a custom code to do this because it’s already a feature. I just tested the mobile navigation on my staging environment using the navigation modal with the same set up with your website but every time I click the menu on the same page the navigation will auto close, so I guess there’s a plugin conflict or custom code that affects the behavior of the navigation Modal on your website.

I recommend you to do the following troubleshooting procedures.

  1. TESTING FOR THEME RELATED ISSUE
  2. TESTING FOR PLUGIN CONFLICT
  3. THEME UPDATE
  4. CHILD THEME
  5. CSS/JS CUSTOMIZATION
  6. VERSION COMPATIBILITY

Hope that helps.

Thank you.

Are you sure? I don’t see it closing on the live web page, not in testing environment.
For the page I sent, when you use the drop down Nav Collapsed called “Chapter Menu” and select “Chapter 2” and then select one of the sub menu options it jumps to that part on the page and the nav doesn’t close.

Hi @clefler,

Yes, I can see the issue on your end but we can’t replicate the issue on our staging area that’s why we advise you to do the troubleshooting procedure. Please do the following troubleshooting I posted above. Only if none of that helps, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

I can do the troubleshooting steps but not sure I understand the issue.
Are you saying that the Nav Collapsed on mobile is always supposed to close for same page navigation?
There has been no custom js utilized which is what I thought was the fix from other posts.

Hi @clefler,

Yes, that’s correct. Navigation Collapsed on mobile always close after selecting the menu. You can check it on my staging environment. Please see secure note.

Hope that helps.

Thank you.

Ok, does it matter if some links are not on the same page?
I tired disabling plug-ins and everything is up to date.

Hi @clefler,

I checked your menu and the hierarchy structure and tested the following code with it. It seems working with your Chapter menu, please add the following code into the Theme Options > JS.

jQuery(function($) 
{
    jQuery('.x-anchor-menu-item').on( 'click', function() 
    {
        console.log(jQuery(this).attr('href'));
        if(jQuery(this).attr('href')!="#")
        {
            jQuery('.x-modal-close').trigger('click');
        }
    });
});

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Note: checked the above code adding through the browser console debugger and found it’s working. Please find the video attached in the secure note.

Hope it works.
Thanks

That worked thank you for all the help!

Hi @clefler,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.

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