0

I have an anchor link in my main menu to a contact form on my home page, when you go there from another page the "hamburger" icon becomes unclickable.

I'm using the "Shapely" theme for wordpress and I believe that there is a bug on it. I had already asked on their support forum but with no answer.

You can see what I'm talking about if you go to the demo site and add an anchor link to the URL on mobile view and try to click on the menu (it doesn't work).

https://colorlib.com/shapely/#any-id

I need a workaround for this. What can I do?

NullEins
  • 101
  • 1
  • 13
  • look at this file: `https://cdn.colorlib.com/shapely/wp-content/themes/shapely/assets/js/shapely-scripts.js?ver=20160115`: at line 26. it's throwing error, when the anchor of link not suit with any menu element in your page – Samvel Aleqsanyan Jan 27 '18 at 10:13
  • I understand that may be the case of the example that I provide, but on the site I'm working that section (#contact-form-container) exist on the menu and I still having the same issue – NullEins Jan 29 '18 at 16:29

1 Answers1

0

You have javascript error in file, named shapely-scr‌​ipts.js. javascript stopes executing code located after error in one file/<script></script> tags.

In your case, the ways to save all theme js functions and fixing errors, are:

1. First way:

Modify .js file of theme. Even after modification, if you'll update your theme, you'll lose all changes you made. Here is what you need to change:

Go to {your-website-folder}/wp-content/themes/shapely/assets/js/ using file manager/ftp connection and find shapely-scr‌​ipts.js file. After find this code in that file

// Smooth scroll
if ( '' !== window.location.hash ) {
  element = $( '#site-navigation #menu a[href=' + window.location.hash + ']' );
  if ( element ) {
    scrollToID = '#' + element.data( 'scroll' );
    $( 'html,body' ).animate( {
      scrollTop: $( scrollToID ).offset().top
    }, 2000 );

    newURL = window.location.href.replace( window.location.hash, '' );
    window.history.replaceState( {}, document.title, newURL );

  }
}

It's starts on line 24 and endes on line 36, and replace with this one:

if ('' !== window.location.hash) {
    element = $('#site-navigation #menu a[href=' + window.location.hash + ']');
    if (element.length > 0) {
        scrollToID = '#' + element.data('scroll');
        $('html,body').animate({
            scrollTop: $(scrollToID).offset().top
        }, 2000);
    }else {
        element = $(window.location.hash);
        if (element.length > 0) {
            $('html,body').animate({
                scrollTop: $(element).offset().top
            }, 2000);
        }
    }

    newURL = window.location.href.replace(window.location.hash, '');
    window.history.replaceState({}, document.title, newURL);
}

After this changes your theme js file will work without any errors, which mean that hamburger menu will work, too.

2. Second way ( if you're using child theme ):

Copy file named shapely-scr‌​ipts.js ( mentioned in option 1 ) in some folder of your child theme. Make changes described in option 1 with copied file shapely-scr‌​ipts.js( in your child theme ). After this you'll need to prevent file in your parent theme from loading, and instead of it load file from child theme. This will always load your changed file, even when you update your parent theme

Samvel Aleqsanyan
  • 2,812
  • 4
  • 20
  • 28
  • @NullEins make changes descriped in my answer. If I helped you, then accept my answer as right: https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work . If there will be any questions, feel free to ask them – Samvel Aleqsanyan Jan 30 '18 at 09:10