[Resolved] anchor link doesn't function

Home Forums Support anchor link doesn't function

This topic contains 37 replies, has 3 voices, and was last updated by  Tom 8 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 38 total)
  • Author
    Posts
  • #456422

    mike

    Hello

    this is an anchor link. https://www.babdesign.co.il/#contact

    it works well from this page’ last menu item https://www.babdesign.co.il/%D7%90%D7%95%D7%93%D7%95%D7%AA/
    (the item with the arrows icon)

    On the same page – on the bottom – there is a button with the same anchor link.
    When pressed it does nothing.

    Why?

    Thanks

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #456449

    Leo Customer Support

    Hi there,

    Not sure what you mean?

    Which button are you referring to?

    #456739

    mike

    On this page https://www.babdesign.co.il/אודות

    there is an anchor link – it apperas once in the menu (the item with the arrows icon) and it appears once again in the button at the bottom of the page – there is only 1 button there

    when clicking the menu item it follows the anchor link
    when clicking the button at the bottom of the page it does not follow the link

    Merry Christmas!!!

    #456803

    Leo Customer Support
    #456814

    mike

    you are looking at the main page. i’m talking about this page https://www.babdesign.co.il/אודות

    https://postimg.org/image/nyvmui9vx/

    #456922

    Tom Lead Developer

    Hi there,

    It could be the javascript you’re using for the smooth scrolling – have you tried removing it just to test?

    #457056

    mike

    Hi,

    This code is used for keeping anchors links un-highlighted in the menu when clicked
    It’s in the wp-footer hooks. I’ve disabled it for testing, still the button did not work.

    <script>
    jQuery( document ).ready( function( $ ) {
    $( document ).on( ‘click’, ‘.main-nav li > a:first-child’, function( e ) {
    var mobile = $( ‘.menu-toggle’ );
    if ( mobile.is( ‘:visible’ ) ) {
    $( ‘.menu-toggle’).closest( ‘.main-navigation’ ).removeClass( ‘toggled’ );
    $( ‘.menu-toggle’).closest( ‘.main-navigation’ ).attr( ‘aria-expanded’, $( ‘.menu-toggle’).closest( ‘.main-navigation’ ).attr( ‘aria-expanded’ ) === ‘true’ ? ‘false’ : ‘true’ );
    $( ‘.menu-toggle’).removeClass( ‘toggled’ );
    $( ‘.menu-toggle’).children( ‘i’ ).addClass( ‘fa-bars’ ).removeClass( ‘fa-close’ );
    $( ‘.menu-toggle’).attr( ‘aria-expanded’, $( this ).attr( ‘aria-expanded’ ) === ‘false’ ? ‘true’ : ‘false’ );
    }
    var target = $(this).prop(“hash”);
    if (target && typeof $( target ).offset().top != ‘undefined’ ) {
    $target = $( target );
    $height = $( ‘.main-navigation’ ).outerHeight();
    $(‘html, body’).stop().animate({
    ‘scrollTop’: $target.offset().top – $height * 2
    }, 900, ‘swing’, function () {
    window.location.hash = target;
    });
    }
    });
    $( document ).on( ‘click’, ‘.entry-content a’, function( e ) {
    var target = $(this).prop(“hash”);
    if (target) {
    e.preventDefault();
    $target = $( target );
    $height = $( ‘.main-navigation’ ).outerHeight();
    $(‘html, body’).stop().animate({
    ‘scrollTop’: $target.offset().top – $height * 2
    }, 900, ‘swing’, function () {
    window.location.hash = target;
    });
    }
    });
    });
    </script>

    #457060

    mike

    Sorry,

    After clearing cache the button does work.

    Now the question is – how to i keep clicked menu items with anchor links not highlighted when clicked?

    Alex

    #457306

    Leo Customer Support

    If I understand you correctly, you can change the menu item current and text color in Color > Primary Navigation.

    #457366

    mike

    I have current set to white – but i don’t want anchor links to appear white after clicked because then multiple menu icons appear white.

    Now i have another more serious issue – all anchor links stopped working on mobile….

    On all pages and menus

    Even on the pc – when the browser is set to mobile width they stop working

    Alex

    #457536

    Tom Lead Developer

    For the color issue, try setting the focus color to the same as the link color:

    .main-navigation .main-nav ul li:focus > a,
    .main-navigation .main-nav ul li.sfHover > a {
        color: #40b28b;
    }
    
    .main-navigation .main-nav ul li.sfHover:hover > a {
        color: #fff;
    }

    As for the scroll issue, it could be something in your javascript – hard to tell. Have you considered using a plugin like Easy Scroll Links?

    #457586

    mike

    Hi,

    I have no modification in java on this site…

    I don’t want to use any 3rd party plugin if unnecessary.
    When i use Elementor’ menu the anchor links work fine….

    None the less, I tried to use the plugin. Didn’t change anything. Still anchor links don’t work on mobile. I really need to solve this

    The color didn’t change it

    Alex

    #457973

    Tom Lead Developer

    Where did you get this javascript from?: https://generatepress.com/forums/topic/anchor-link-doesnt-function/#post-457056

    Where did you add the CSS? I’m not seeing it anywhere on the site.

    #458035

    mike

    1. not sure about the javascript, it’s deactivated now anyway – so it’s not the reason the anchor links don’t work on mobile, is it?

    2. which css are you referring to?

    i’ve added the css from above back to the site (removed it when it didn’t work) – but i see all css is deactivated? – don’t remember if i gave you credentials to the site, have i?

    Thanks

    #458098

    mike

    Hi,

    Because of the time differences i can see it will take time to fix this bug, so i’ve activated maintenance mode.

    I do not want customers to see it like this..

    If u do not have credentials already, please tell me where to send them

    Hoping for a quick fix

    Thanks

    Alex

Viewing 15 posts - 1 through 15 (of 38 total)

You must be logged in to reply to this topic.