[Support request] Issue with anchor and sticky

Home Forums Support [Support request] Issue with anchor and sticky

Home Forums Support Issue with anchor and sticky

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #564751
    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

    #565100
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #566138
    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

    #566636
    Tom
    Lead Developer
    Lead Developer
    #566640
    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
    } );
    #566652
    Tom
    Lead Developer
    Lead Developer

    Awesome, thanks for sharing!

    #566655
    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…

    #566958
    Tom
    Lead Developer
    Lead Developer

    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.

    #567002
    Pascal

    Yes, it would be cool
    thanks

    #569915
    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.

    #569943
    David
    Staff
    Customer Support

    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/

    #569951
    Julie

    Thank you, I’ll take a look.

    #570055
    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.

    #610624
    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.

    #610625
    David
    Staff
    Customer Support

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.