[Resolved] Navigation Current Color functionality

[Jason]

Hello!

I was wondering if there was a way to change how the navigation current color functions. Right now my navigation are my categories and if someone is viewing a post from within that category, the navigation changes to “navigation current color”. I understand why that is, but I would prefer if it didn’t change to navigation current color unless they were on the actual category archive page. Is this doable?

Here is an example: https://fullcleared.com/news/starfield-gets-its-first-actual-release-date/

Viewing that page automatically changes the “News” in the nav to orange. I’d prefer it to stay white.

Alternatively, is there a way for the hover color to take priority over navigation current color? If hover will work even when hovering over current page, then I can do that instead.

Thanks!

[Fernando]

Hi Jason,

That setting should be in Appearance > Customize > Colors > Primary Navigation > Navigation Text > Current Color.

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

[Jason]

Hey Fernando,

I know where to change the color – I’m trying to change its behavior. Right now the navigation menu option changes to “current color” when it’s on any post within that category. I would like it to only change the color when it’s on the actual archive page (the page the navigation item links to).

Let me know if that makes sense – thanks!

[Fernando]

I see. Thank you for clarifying.

Can you try adding this through Appearance > Customize > Additional CSS?:

.single-post .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--base-3);
}

.single-post .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    color: var(--orange);
}

[Jason]

That worked perfectly! Thank you again for your help Fernando!!

[Fernando]

You’re welcome, Jason!

[Author]

Posts