How to color a specific entry in the navigation?

[ItsTheSky]

Hi there!
It's a quick question, what's the best way to make a navigation page colored in the sidebar?
For instance, in the following sidebar, I would like the "Webhooks" entry to be in green:

Plus, can I only make the icon colored? It would be perfect!

[kamilkrzyskow]

Hello @ItsTheSky,
you'd need to use additional CSS, and target links using their href attribute. There was a similar question in the past:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css
• How to add animations to page icons? #6547 (reply in thread)
• https://developer.mozilla.org/en-US/docs/Web/CSS/color
  I believe the SVG icons use the currentColor fill, so changing the color text property should modify them.

[ItsTheSky]

Hi!
Thanks for the quick responses & all those reference ❤️
I'm struggling to select the nav item tho, it maybe won't work in local ?
Here's my current CSS (I'm sure it's linked as I use other CSS stuff for macros):

.md-nav--primary .md-nav__link[href="../basic-stuff/webhooks/"] svg {
    color: red;
}

I accessed the page via the local path http://127.0.0.1:8000/basic-stuff/webhooks/, so did I use the right relative path? It seems it checks for the href link in the link tag, is it right?

It does not shows the color even if I change page btw

[ItsTheSky]

Got it working using .md-nav__link[href*="basic-stuff/webhooks"], but is this still the best way to do it?

[kamilkrzyskow]

red is not green 😉
I don't think there is a better way. There is no other unique identifier for a nav object that would work across all pages.
You could add more customization if you don't want to use the href, which could change if you move the page out of basic-stuff/webhooks.

• https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme
• https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/partials/nav-item.html

I think there is an option to access the nav_item.page.meta, but I'm not sure, and then you could define a special class/id that would get added to the HTML if the nav_item would be the page with a specific metadata front matter.
However, this is quite involved for a small color change, so I don't think it's worth it 🤔

[ItsTheSky]

Gotcha, thanks you a lot again!
It's working like a charm using * thingy, thus I'll keep doing it this way 👍