[Resolved] anchor link doesn't function

[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

[Leo]

Hi there,

Not sure what you mean?

Which button are you referring to?

[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!!!

[Leo]

This is the button you are referring to? https://s14.postimg.org/ogqsathlt/2017-12-25_1417.png

[mike]

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

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

[Tom]

Hi there,

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

[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>

[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

[Leo]

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

[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

[Tom]

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?

[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

[Tom]

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.

[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

[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

[Author]

Posts