Archived topic
Problems with HTML Anchors within the navigation and the "current page" color
5 replies · Started by Marcel Kuhla on April 12, 2020
Hello,
I'm currently working on our new company homepage and now I have the following problem:
I have created an Element for a full-size page header and some text and some call-to-action buttons etc. Now I used Gutenberg with some blocks to model the general front page and I have anchored some blocks like lastest news, team or partners.
But when I add the links for these anchors to my navigation, all links with /#anchor will be highlighted. For now, I have disabled that custom color, but there must be a way to use it?
Regards,
Marcel
Hi there,
Any chance you can show us an example? I'm not able to picture it.
I tried going to your URL but it's a 404.
Let me know :)
Hello Tom,
here you can see it. All menu points are HTML anchor links "/#team" "/#partner" etc. The main menu color is set to #fff and the current page color is set to #ffd047.
Regards,
Marcel
So all of the menu items are using the current color?
That's because they're all pointing to the current page, so WordPress adds the current-menu-item class to them.
You could disable the current menu item color from this page with CSS, and then only target :active selector.
If you'd like to link me to the page I should be able to help more.
Hello Tom,
I can't because the site isn't available online currently. But I disabled the color on current-menu-item and used page-item as an anchor and gave it the right color.
It's a bit hacky, but it works (for now).
Thanks for getting me on the right track :)
Regards,
Marcel
No problem! :)
