Archived topic
anchor link doesn't function
37 replies · Started by mike on December 24, 2017
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
Hi there,
Not sure what you mean?
Which button are you referring to?
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!!!
This is the button you are referring to? https://s14.postimg.org/ogqsathlt/2017-12-25_1417.png
you are looking at the main page. i'm talking about this page https://www.babdesign.co.il/אודות
Hi there,
It could be the javascript you're using for the smooth scrolling - have you tried removing it just to test?
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>
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
If I understand you correctly, you can change the menu item current and text color in Color > Primary Navigation.
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
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?
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
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.
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
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