[Resolved] Navigation issue in combination with anchor links

[scometamus]

Der GP support,

I’ve sent the required URLs and the video privately.

When you are at the home page, you see that ‘HOME’ is red because it’s the page we are on. However, ‘SERVICES’ is red here too. When we are on the ‘ABOUT’ page, ‘SERVICES’ isn’t red anymore. – I guess I know why it is like this: SERVICES is on the same page as HOME, but you need to scroll down to get there. I used anchor links (URL+anchor) to solve it, but then ‘SERVICES’ gets red when it shouldn’t be red. When I use only the anchor #, the ‘SERVICE’ button obviously does not work when I am on another page – but then the ‘SERVICES’ wouldn’t be red when you are at ‘HOME’. – It’s a little confusing, hope I could explain it well enough. I also made a video that is attached privately. Hope it can be solved so ‘SERVICES’ is only red when you click on it and still can stay an anchor link on the ‘HOME’ page.

Thank you so much in advance and have a great day!

Jan

[Leo]

Hi there,

I believe a plugin like this is what you are looking for:
https://en-ca.wordpress.org/plugins/page-scroll-to-id/

[scometamus]

Hey Leo, I checked the plugin and read the documentation, but couldn’t solve my issue.

I ticked: ” Allow only one highlighted element at a time” which is basically my problem. But still, ‘Services’ is highlighted when I am on ‘Home’. Is there no option to modify that via CSS?

[Leo]

What about this CSS?

body.home .main-navigation .main-nav ul li.menu-item-4625[class*=current-menu-]>a {
    color: #242424;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[scometamus]

Almost perfect, Leo!

When you click on ‘Services’ though it’s not red anymore, now it’s always black. Is it possible that it turns red only when you click on ‘Services’?

[Leo]

When you click on ‘Services’ though it’s not red anymore, now it’s always black. Is it possible that it turns red only when you click on ‘Services’?

That’s not possible with CSS unfortunately.

The plugin I suggested above should work for that:
https://en-ca.wordpress.org/plugins/page-scroll-to-id/

Please check with their support and confirm that you’ve set everything up correctly if you can’t get it to work.

[scometamus]

Ok writing to them and gonna update this post when I found a solution.

[Leo]

Sounds good thank you.

[scometamus]

Okay, the plugin author told me I need to set “Highlight selector(s)” (in the plugin’s settings) to the css value the menu has and then do some CSS adjustments. It worked!

However I have a last problem to solve the issue: I want to add an anchor link to the top of the page. However Gutenberg/Generate Blocks does not show the Advanced > HTML Anchor field for example for the title of the page.

The goal is, that the respective anchor link always goes to the top of the respective page. Is that solvable? 🙂

[Tom]

Hi there,

Try using this: #main

Let us know 🙂

[scometamus]

Thank you Tom, I solved the issue with the plugin developer. #main wasn’t working together well with the plugin, so I needed to find another solution. Thanks nonetheless very much!

[Tom]

Glad you got it working 🙂

[Author]

Posts