-
Posts
-
Hello there!
I have a menu with 6 links pointing to different places on a homepage I’m developing: http://wiserproperty.com/home.
Currently, the blue underline in the menu stays only on the first link. Even when I click on different menu items, the blue underline indicating the active link does not update. I assume this is because I am linking to different anchored links within the same page, and as it’s the same page, it doesn’t register the new link? If this is the case – do you guys have any idea how I can change the CSS to make it respond to each anchor link in the menu?
Thank you for your help :-)
Andreas
Hey Andreas!
Add this at the end of js/avia.js:
jQuery("#avia-menu").on("click", "a", function(){ jQuery("#avia-menu li.current-menu-item").removeClass("current-menu-item"); jQuery(this).closest("li").addClass("current-menu-item"); });Regards,
JosueHi Josue,
Thank you very much for your help!
I have tried placing the code you shared at various points in avia.js, but when I refresh, the menu no longer shrinks, there isn’t an animated scroll down to the anchor links, and the blue underline of the links only appears when I hover over a link, but they don’t remain once I’ve clicked on the link.
I have probably just placed the code in the wrong place, I’ve left the code in avia.js, so if you see you will see what I mean. Do you have any ideas?
Thanks once again!
Kind regards,
Andreas
Hi,
It’s not there: http://wiserproperty.com/wp-content/themes/enfold/js/avia.js,qver=1.pagespeed.jm.pwyUM0DWEb.js
I think you need to disable any server compression/cache functionality first.
Best regards,
JosueHi Josue,
I placed the code at the very end of avia.js and the links still appear not to stay underlined when clicked. I reset Safari, emptying the cache too, and appears to still not work. I also disabled ‘WP Super Cache’ Plugin, is that what might be something that’s stopping it from working?
Any ideas?
Thanks!
Kind regards,
Andreas
Hi!
I see it’s right there, however there are some typos related to the quotes, try pasting it directly in from here:
https://gist.github.com/josueochoa/91654e63e167f4040a81Cheers!
JosueJosue,
You are a very kind man, thank you so much for your time and effort, it is working as expected now!
Have a good night :-)
Kind regards,
Andreas
Hi Josue,
I have a final request if you don’t mind. As the behaviour currently is, when you load the homepage, ‘Sell your home quickly’ is selected by default. Is there any way to have it so none of the links are underlined blue until they have actually been clicked? I don’t suppose there’s a way for the page to detect when you scroll past an anchor link, activating the blue underline for each section automatically as you scroll past it? No worries if the second or first parts aren’t possible, it’s more of a casual aesthetic thing.
Thank you :-)
Kind regards,
Andreas
Hi!
Modify the code to something like this:
jQuery("#avia-menu li.current-menu-item").removeClass("current-menu-item"); jQuery("#avia-menu").on("click", "a", function(){ jQuery("#avia-menu li.current-menu-item").removeClass("current-menu-item"); jQuery(this).closest("li").addClass("current-menu-item"); });Best regards,
JosueI copied the code but the menu has become a bit unresponsive again (and the header image doesn’t appear – how strange!). Have I not copied the code correctly again, because I can’t spot any differences between your code and what I’ve pasted?
Thanks Josue!
Ah, as soon as I said that, I refreshed and all is well, the underline only appears now when a link has been clicked!
Brilliant work Josue, right, I think it’s time I let you rest a bit now! Thanks once again :-)
Kind regards,
Andreas
- The topic ‘Blue underline on menu links in header’ is closed to new replies.