[Support request] Issue with anchor and sticky

[Pascal]

Hi

Please look at https://www.micado-software.com/ with your mobile then “click” on a menu link, you will see that you are sent somewhere in the page but not where I have put my anchor.

I’m using Elementor and you cas see in this screenshot https://s26.postimg.cc/6xik64nih/Capture_d_e_cran_2018-05-01_a_17.57.22.jpg how it is set.

Thanks

[Tom]

Hi there,

It’s likely that the calculation is off being the mobile menu closes when you choose a menu item.

You can try disabling smooth scroll within Elementor, and use our smooth scroll instead: https://docs.generatepress.com/article/smooth-scroll/

It takes the mobile menu height into account when calculating the distance to scroll. You just need to add the smooth-scroll class to your menu items.

Let me know if you need more info 🙂

[Pascal]

Hi Tom
I get an answer from Elementor support:

“To disable the smooth scrolling you would need to use another Element apart from the menu anchor widget.
You can use an HTML widget for example with and set the id you would like.

”

That what I did, and it do not change anything, I mean, yes the Elementor smooth scroll is now disable using this HTML Widget and it works on desktop, but not on mobile.

Here are some screenshot of my setup:
Menu: https://s26.postimg.cc/8to6jtpg9/menu.jpg
Elementor: https://s26.postimg.cc/3v0o5atd5/elementor.jpg
GP: https://s26.postimg.cc/gmeubsnpl/image.jpg

Thanks

[Tom]

Can you try applying this fix?: https://generatepress.com/forums/topic/smooth-scroll-4/#post-549703

[Pascal]

Hi
I had an answer from Elementor that works (you have to adjust the value ‘-1000’ to suit your needs:

add_action( 'wp_footer', function() {
	if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
		return;
	}
	?>
	<script>
		jQuery( function( $ ) {
			$( window ).on( 'elementor/frontend/init', function() {
				
				elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
					var isMobile =  $(window).width() <= 760;
					
					if (isMobile) {
						return scrollTop - 1000;
					} else {
						return scrollTop;
					}
					
				} );
				
			} );
		} );
	</script>
	<?php
} );

[Tom]

Awesome, thanks for sharing!

[Pascal]

Your are welcome 🙂

FYI I tried the slideout menu with my internal anchors, and this time, this is a new issue: when I click on an menu item the window scroll to the anchor, but the slideout menu stay open… Maybe anoter ticket or it is related, don’t know…

[Tom]

Our built in smooth scroll closes the menu, but I think I’ll have to add in some code so it closes with other smooth scroll scripts as well.

[Pascal]

Yes, it would be cool
thanks

[Julie]

Hi, I have this same problem. I’ve tried your fix code from Pastebin but it doesn’t seem to make any difference.
I would try Pascal’s code from Elementor but I’m not sure where to put it!
Any advice welcome…
Site is http://simplysumo.com/
Thanks.

[David]

Hi Julie, if you want to try adding the code, this document will help. I suggest the Code Snippets for the easiest method.

https://docs.generatepress.com/article/adding-php/

[Julie]

Thank you, I’ll take a look.

[Julie]

Code snippet didn’t seem to help. I’ve tried quite a lot of combinations.
When I tried adding the smooth-scroll css to the menu items the desktop version was put out.
For now it’s almost OK – I’ve turned off GP scrolling, the desktop works, the slideout menu works to the right anchor point but has to be clicked to disappear again.
I have to leave it for the time being but would be interested if anyone has an update on a better solution for Elementor and GP to play nicely (free Elementor, premium GP).
Thanks.

[Greg]

Hello,

I am facing the same issue and would like to question whether there may be a better solution.

I noticed the source of the problem is that the content is pushed down when mobile navigation opens (basically the top of the site scrolls down to the bottom of the opened menu which is also not looking great with just few menu items). But everything works just fine if you scroll down a bit and use sticky navigation (which covers content when it opens and just uncovers it as it closes). The php suggested earlier actually breaks sticky navigation to anchors when it adjusts to the mobile menu.

I haven’t tried migrating to GP smooth-scroll as per the other post referenced above but would like to make a suggestion instead.

Would you consider adjusting the mobile menu to have the same behavior as the sticky navigation or enable sticky navigation to also replace the mobile menu even at the top of the page ? Or is it just not an option? In addition to fixing this issue it would also look better with short menus.

Thanks.

[David]

Hi Greg, just to be clear, instead of the mobile hamburger menu you would like the option for the normal horizontal navigation on mobile?

[Author]

Posts