Troubles with menusolours when using local anchors

Hi there,

What is the expected result?

Are you trying to remove the grey color so the menu items stay orange/yellow?

Hi Leo,

Background INITIAL Yellow HOOVER white CURRENT black
Text INITIAL White HOOVER yellow CURRENT white

Roman

Hmm that's exactly how it is right now.

WordPress recognizes the menu item as current when the link is on the current page.

So would the last three menu items just don't have current page colors in this case?

Yes

Can you add a custom class of anchor-item to these three menu items:
https://www.screencast.com/t/Dye9mvah

CSS classes can be added by following the instructions here:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

I put CSS Class "anchor-item" to those three menu items. It did not help. I can send you login data, please check it in the live environment. How to send them not to be public?

I put CSS Class “anchor-item” to those three menu items. It did not help.

That's only the first part of the solution.

Please remove the anchor-item class from the Home menu item so they are attached to the 3 menu items I specified here:
https://www.screencast.com/t/Dye9mvah

Then try adding this CSS:

.home .main-navigation .main-nav ul li.anchor-item a {
    background-color: #ff9933;
}
.home .main-navigation .main-nav ul li.anchor-item a:hover {
    background-color: #ffffff;
    color: #ff9933;
}

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

It did not help, I'm sorry.
Roman

Looks like it's working on my end:
https://www.screencast.com/t/90WaRzk68

Make sure to clear your browser cache or try incognito mode.

Hi Leo,
Yes but after clicking on one of those 3 last items, they did not change the colour.
Roman

Ahh if that's a requirement then you will need to use a plugin like this:
https://en-ca.wordpress.org/plugins/page-scroll-to-id/

Oh, ist scrolls very smooth now.

But the 3 items remain orange .... is there a setting in page-scroll-to id, which it makes the 3 item to change colour to current item?

Hi Roman,

Not sure if page-scroll-to id has a setting like that. It would be best to reach out to them if they have one.

Otherwise, you would need custom JS and CSS to achieve as such.

For instance, to do so, create a Hook Element hooked to wp_footer. Then, add this code:

<script>
var anchorLinks = document.querySelectorAll( '.anchor-item' );
const anclen = anchorLinks.length;
for ( var i = 0; i < anclen; i++ ) {
    anchorLinks[ i ].addEventListener( 'click', function() {
				for ( var b = 0; b < anclen; b++ ) {
					anchorLinks[ b ].classList.remove('current-product-active');
				}
        this.classList.add('current-product-active');
    } );
}
</script>

Example: https://share.getcloudapp.com/Z4uAq5zA

I used the anchor-item you added as the selector in my code.

Then, add this CSS in Appearance > Customize > Additional CSS:

a.current-product-active {
    background-color: #ffffff;
    color: #ff9933;
}

Kindly modify the color values to your preference.

Wow, thank you for best support ever. You answer so fast, even on Sundays! I need now some to implement it.