Close Collapsed Nav on Anchor/Jump Link Click

Support
#1

We have a homepage with anchor links in the menu: https://betemp.wpenginepowered.com/.

We want the collapsed navigation to close automatically when any anchor link is clicked . For example, if “TEAM” is clicked, the collapsed navigation should close on all viewports instead of staying open.

How can we achieve this?

#2

Hello Del,

Thanks for writing in! You will need a custom JS code to be able to detect any click events on each menu items in the Off Canvas content. Once the menu item is clicked, the Off Canvas toggle can then be triggered as clicked as well.

I have noticed that you have added this custom JS on the page.

/* <![CDATA[ */
jQuery(document).ready(function ($){
$('a[href*="#"]').off( "click touchstart");
             $('a[href*="#"]').on('touchend click', function(e) {
                href        = $(this).attr('href');
                notComments = href.indexOf('#comments') === -1;
                if ( href !== '#' && notComments ) {
                  var theId = href.split('#').pop();
                  var $el   = $('#' + theId);
                  if ( $el.length > 0 ) {
                    e.preventDefault();
                    
                   
                    $('html, body').animate({
                                scrollTop:   $($el).offset().top -98
                            }, 480);
                      return false;      
                  }
                }
              });

        });

jQuery(function($) {
  $('.x-menu-collapsed .x-anchor').on( "click touchstart", function() {
    $('.x-off-canvas-close').click();
  });
});
/* ]]> */

Be advised that custom JS is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

You may need to contact a developer to be able to accomplish what you have in mind.

Best Regards.