Change color of active item in navigation menu

Yes, there is, but you need to add custom CSS (I use a plugin).

This worked for me, except for the static home page:

.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
		color: #365ABA !important;
}

Of course, change the color code to your desired color.

For the static home page, I had to add a CSS class to that page’s menu item in the menu editor (I used ‘home-menu’, but you can choose your own tag). Then, in this post, another forum member kindly figured out that it can be targeted with this code:

.home .wp-block-navigation-item.home-menu.wp-block-navigation-link,
.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
  color: #365ABA !important;
}

Again, replace my color with your own.

For reasons I don’t understand, without the custom CSS class, the static home page doesn’t receive a “current-menu-item” tag (unless I missed it).

Hope this helps.

Thanks @bobk88 !
I’m a complete beginner with WordPress, so I apologize in advance if I’m unable to understand things.

I copy-pasted the CSS snippet you presented into the style.css file in Tools > Theme File Editor.

But this didn’t do anything. Is there something I missed? For context, the only plugins I have enabled are Bluehost integration and JetPack.

• This reply was modified 2 years, 5 months ago by masacaai.

I’ve never edited that style sheet. I think it’s not recommended unless you’re using a child theme, because the style sheet might be overwritten when the theme is updated (if you didn’t know, themes are occasionally updated with security patches, bug fixes, enhancements, etc).

I use a plugin called Site Origin CSS, and another one I considered is Simple CSS by Tom Usborne, developer of the well-regarded Generatepress theme.

I suggest you remove the code you added to style.css and try one of those (or another CSS plugin).

@bobk88 Thanks again!

Unfortunately, it isn’t working. I installed and activated Site Origin CSS as you suggested, and I pasted the snippet you provided into the custom CSS editor.

I also made the adjustment to the navigation menu by going into the editor and pasting the second snippet of code under Advanced > Additional CSS class(es) to fix the problem with the static homepage. No luck.

CSS makes my head spin ??

In case it wasn’t clear, in “Additional CSS Classes”, the only thing to enter is “home-menu” (without quotes) – not the whole code snippet.

Instead of “home-menu”, you could use any name you want for the class. Let’s say you called it “example” instead. In that case, the CSS code for the static home page would be:

.home .wp-block-navigation-item.example.wp-block-navigation-link,
.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
  color: #365ABA !important;
}

I checked your site, and if I understand the Inspector info correctly, you might have pasted in the whole bit of code.

Be sure you add the Additional CSS class to ONLY the page that’s chosen as your static home page in Settings > Reading Settings.

You add the custom class to that page’s link in the Navigation editor (not to the page in the Page/Post Editor).

Here’s a step-by-step, just in case:

Go to the Site Editor and click on Navigation (I like to select it in List View). You might have to open the Header to see “Navigation.” Then click on the little chevron icon to the left of the word “Navigation” to open the list of pages in the menu. (On my site, it takes a few seconds for the chevron icon to appear.) Then click on the page you’re using as the static home page, and add the Additional CSS class in the right column.

If none of this works, I’m not sure where to look next – I only know a little HTML and CSS! If you made any edits to style.css, un-do them if you haven’t already.

Does this help?

@masacaai Add this to your custom CSS and it should work:

/* Adds Custom Color for Current Menu Item */
.blog .blog,
.archive .blog,
.single-post .blog,
.current-menu-item {
  color: #ffcc00;
}

You will need to add a custom class for your blog page. When you go to your ‘Edit Site’ and use the ‘List View’ option, highlight your Blog page and to the right you’ll see a ‘Advanced’ dropdown. Clicking on that shows “Additional CSS class(es)”. Type in ‘blog’ and save it.

@bobk88 Not sure why your site’s home page doesn’t have a current-menu-item, but it should. I just checked my testing site and it shows one.

• This reply was modified 2 years, 5 months ago by Mike Matenkosky. Reason: typo

@hikinmike On your testing site, did you create the menu from scratch in Twenty Twenty-Two, or was it a previously-existing menu?

I applied Twenty-Twenty Two to an existing site and used the old menu. I wonder if that could be the source of the problem. I might try making a menu from scratch and see if the results are different, but with your help, the old menu works fine.

@bobk88 Pretty sure it was an existing menu.

@hikinmike @bobk88 Thank you all so much!
It works now. I was a bit confused with the list view, but it turns out the items in the navigation widget aren’t treated as single-page links by default. Clicking on ‘edit’ allowed me to convert them to single-page links, and that made everything much clearer.

I try to get the same result. In my case https://storch.watch I edited the css:

.wp-block-navigation-item.current-menu-item.wp-block-navigation-link a{
	text-decoration: underline; 
	text-decoration-style: solid; 
	text-decoration-color: #f6f6f6;
	color: #f6f6f6;
	background-color: #c27113;
}

It works on the menu items “Storch-Watching – Das Projekt” and “Storch Live”. On submenus it behaves different. In the first submenu “Wittgensdorfer St?rche” it works except “Wittgensdorfer St?rche” itself and in the second submenu “Bildungsangebote” it doesn’t work at all.
I don’t need it to work on the home button “St?rche in Chemnitz-Wittgensdorf”.

I hope it’s ok to post my issue here. Thanks in advance.

@krischan941 This was resolved. Looks like you’re issue is working. If you still need help, it’s best to create a new thread.