topic Mobile navigation going crazy in CMS Development

Mobile navigation going crazy

gio-nab — Mon, 08 Oct 2018 12:25:08 GMT

Evening all!

We're having an issue on a site at the moment

When in mobile view, if we click the menu icon, the menu opens and closes about 5-6 times before staying open, and the same when we close the menu. It's really bizarre and only occurs on the blog list page, not on a specific post.

I've noticed a number of errors in the console too which may be the cause of this, but I have no idea what they mean (see attached)

Any help would be immensely appreciated, thank you!

Re: Mobile navigation going crazy

dennisedson — Fri, 05 Oct 2018 00:40:46 GMT

would have to see the backend, but this looks pretty suspicious

Re: Mobile navigation going crazy

tjoyce — Fri, 05 Oct 2018 11:42:58 GMT

@gio-nab - to go with @dennisedson answer, you need to go into the https://info.correvate.co.uk/hs-fs/hub/4447252/hub_generated/template_assets/1538064380090/CUST_Correvate_Templates/Correvate_Blog_Templates_-_Gripped/Coded_Files/CampaignCreators-jan2017-main.min.js file and add an if statement to the line that adds the mobile trigger:

//OLD
$(".hs-header-logo a").after('<div class="mobile-trigger"><i></i></div>');

//NEW
  if(!$('.mobile-trigger').length){
	 $(".hs-header-logo a").after('<div class="mobile-trigger"><i></i></div>');
  }

Re: Mobile navigation going crazy

gio-nab — Sun, 07 Oct 2018 23:28:40 GMT

Thank you both for getting back to me.

@tjoyce, I've tried your suggestion and it doesn't look to have worked unfortunately. I'm not sure if it's a caching issues (the link you shared was -main.min.js, I only have access to -main.js via hubspot).

Do you still see it on your side? I cleared cache / tried multiple devices.

Thank you so far!

Re: Mobile navigation going crazy

tjoyce — Mon, 08 Oct 2018 11:53:13 GMT

@gio-nab - You appear to have a deeper issue where all of your header assets are being duplicated about 10 times. This is causing jquery to be added 10 times which is running all of your triggers 10 times. If we can find a way to fix that, it will increase your page load times tremendously as well as fix all the bugs.

Re: Mobile navigation going crazy

tjoyce — Mon, 08 Oct 2018 12:10:38 GMT

@gio-nab - I believe it's your readingTime plugin. When I add this code to console, it waits about 15 seconds and then replicates your assets another 10 times. You should remove this toxic code and the readingTime Plugin altogether.

$('.total-words').each(function() {
    $(this).readingTime({
        wordsPerMinute: 200,
        readingTimeTarget: $(this).siblings('.time-to-read').find('.eta').addClass('abc'),
        wordCountTarget: $(this).siblings('.time-to-read').find('.words').addClass('babc'),
        remotePath: $(this).attr('data-file'),
        remoteTarget: $(this).attr('data-target')
    });
});

Re: Mobile navigation going crazy

gio-nab — Mon, 08 Oct 2018 12:24:23 GMT

Thank you @tjoyce for all of your help!

This looks to be the culprit of the issue indeed.

If I remove it, it removes the number and leaves the "read" text behind - so I'll have to remove it elsewhere in the template (not an issue!).

Thank you for all of your help 🙂