Archived topic
mobile menu links to an id scroll to halfway the section
13 replies · Started by Jasper on August 23, 2018
On mobile menu links to an id scroll to halfway the section with the corresponding id, on desktop view it works fine.
For instance the menu items: 'over mij' and 'referenties'.
I changed theme to 2014 and then it works fine so it seems theme related.
Hi there,
Can you check in the Customiser > General - is the Smooth Scroll checked?
no, it is not
The issue is that Elementor smooth scroll calculates how far to scroll before the mobile menu collapses, so the calculation is wrong.
Our smooth scroll in GP Premium calculates this change for you, but you'd have to disable smooth scroll in Elementor in order to us it.
Do you maybe know how to disable this, there does not seem to be a setting for it.
Well that sucks..
We could try this script:
<script>
(function($){
$(window).on("load",function(){
setTimeout(function(){
var doc=$(document),
$events=$("a[href*='#']").length ? $._data(doc[0],"events") : null;
if($events){
for(var i=$events.click.length-1; i>=0; i--){
var handler=$events.click[i];
if(handler && handler.namespace != "smooth-scroll" && handler.selector === 'a[href*="#"]' ) handler.selector='a[href*="#"]:not(.smooth-scroll)';
}
}
},300);
});
})(jQuery);
</script>
You can add that into the wp_footer hook.
Then enable smooth scroll in "Customize > General", and add the smooth-scroll class to your links :)
For reference, the code is from here: https://wordpress.org/support/topic/scroll-effects-conflicts-with-elementor-scrolling/
After adding this code, the smooth scroll is still active.
I thought to solve the issue by adding an elementor template and set it as a header, to replace the GP header. But that does not solve it either unfortunately.
You have a handful of javascript errors on the page that might be causing it not to work.
This code on the page is causing an error:
<script type='text/javascript'>
Main.boot( [] );
</script>
It's happening right after your social sharing adder plugin has their script, so maybe if you deactivate that plugin the errors will go away?
Unfortunately that is not the solution.
It looks like you're using the Elementor nav now and the issue still remains?
yes, but i also checked and it is not only GP related. Same issue also on 2017theme and astra.
So i have contacted Elementor support again.
It seems like they need to tweak their smooth scroll script to calculate the distance to travel a couple hundred milliseconds after the link is clicked. This allows the mobile menu to collapse before the calculation is made.
thanks, i forwarded your suggestion to elementor support
No problem - let me know what they say :)