[Support request] Responsive Navigation Colors

[Wolf]

If you visit the homepage you see that I have a onepage design for my homepage. When I click services it jumps to the anchor I placed with elementor but the home nav stays green. Additionally, I want the navigation to be colored in it’s respective color when scrolling to it’s anchor. And sometimes every single navigation tab stays green like this. Even if I haven’t clicked any

[Leo]

Hi there,

Can you take a look at this thread and see if the solution works for you as well?
https://generatepress.com/forums/topic/menu-colours

[Wolf]

I installed https://wordpress.org/plugins/page-scroll-to-id/ and added the following code

.main-navigation .main-nav ul li.sfHover > a {
    background-color: #878787;
}

This didn’t fix the automatic highlighting when scrolling to an anchor neither did it fix the colors.
The problem might be that I have a mix of both on my website ( one page with navigation and one static blog page )

[Tom]

In that plugins settings, try setting replacing the mPS2id-highlight class with current-menu-item.

That way you shouldn’t need any custom CSS.

[Wolf]

Unfortunately that didn’t change anything. Colors are still bugged

[Tom]

Hmm, ok – switch the class back to what they had before.

To remove the constant green on the home page, we can use this CSS:

.home .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: #fff;
}

Then we should just need to add some CSS to highlight them green as we scroll down.

.home .main-navigation .main-nav ul li.mPS2id-highlight > a {
    color: #6cb670;
}

[Wolf]

Hi thanks for the quick response Tom, I added `.home .main-navigation .main-nav ul li[class*=”current-menu-“] > a {
color: #fff;
}`
This which removed the color

the second code you provided didn’t highlight the current anchor though.
Is it possible to achieve this without the plugin ?

[Tom]

Without the plugin you would need some custom javascript.

Did you change the highlight class back to default inside the plugin?

[Wolf]

Yes I changed it back, then tested it. No change.
Uninstalled it to test it; nothing.
What javascript would I need ?

[Tom]

It’s pretty complicated, you’re way better off using the plugin. Is it still deactivated?

It’s not adding any classes to the menu items right now as it should be.

[Wolf]

I reactivated it, the problem is that it scrolls to far, so that a part of the heading is cut off

[Tom]

That’s because your sticky navigation is sitting on top of it.

Does the plugin have an offset value? If so, you can set it to the height of your sticky navigation.

[Wolf]

found the offset, but how do I fix the colors now ?

[Tom]

That must be one of their settings. Right now no classes are being added to the menu items as you scroll down, so something is turned off or misconfigured.

I’m not super familiar with their plugin, so it might be worth contacting them to see if it’s a simple setting somewhere.

[Author]

Posts