Navigation Collapsed - Close on click

Support
#1

Hi,

I´m using Pro header and Navigation Collapsed with anchor links to sections on the same page.
I would like the menu to close when a link is clicked.
I have tried the solution provided in other threads but this will only close the menu.

The code I have tried is this one:

jQuery(function($) {
$(’.hm6.x-menu-collapsed .x-anchor’).on( “click touchstart”, function() {
$(’.x-off-canvas-close’).click();
});
});

You can see this in action here http://clearly.createremain.se

#2

Hello There,

Thanks for writing in! The code is not working because it is not targeting the correct element. The code is targeting hm6 and in your site, you might have a different element. I would recommend that you use this code instead:

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

Hope this helps. Kindly let us know.

#3

I´m afraid that this is giving the same result. I forgot to mention that it´s on mobile devices that the problem exist.

#4

Hi There,

Could you please provide us with your admin account so we can take a closer look?

Thanks.

#5

http://clearly.createremain.se/wp-admin/

#6

Hi again,

I changed your code to this:

jQuery(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 62 //offsets for fixed header
        }, 500);
    		$('.x-off-canvas-close').click();
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 62 //offset height of header here too.
        }, 500);
        return false;
      }
    }
});

And it’s working as expected. Please clear your browser’s cache and check your site.

Cheers!

1 Like
#7

Perfect, thank you!

#8

You’re most welcome!

#9

I’m having the same problem here - would you mind taking a look at mine as well?

Thanks!

#10

Hi @domenicsabol,

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

Thanks!

#11

@Nabeel Sorry for the delay! (I didn’t get a notification that there was a response) tympanicmedia.com - problem is on mobile, the navigation doesn’t collapse on click when the navigation is a # on the same page.
Thanks!

#12

Hi again,

Thank you for providing the URL. I checked your setup and you’ve added an invalid script in your Appearance > Customize > Custom > Edit Global Javascript that is generating an error on the front-end, this could be conflicting with your navigation menu. Please remove the script from your Customizer first then clear your browser’s cache and see if this resolves the issue.

Let us know how this goes!

#14

jQuery(function($) {
$(’.x-menu-collapsed .x-anchor’).on( “click touchstart”, function() {
$(’.x-off-canvas-close’).click();
});
});

this worked for me! thanks for that!

#15

Glad it worked.

Cheers!

Nav Collapsed - Auto close after selection