How to add custom css-style to a specific item of menu

Themes
1

Thank you in advance if tell me how to add custom css-style to a specific item of Secondary Menu (I use Mono theme, but this js-code might be almost the same in all themes).

For example, my Secondary Menu looks like:

Banana
Apple
Lemon

I want to add style=“color: yellow;” for item 3 (Lemon).

2

I think we can count -maybe- 10 different ways of achieving this. But I would do it with just CSS, in code injection. CSS is very powerful. You don’t need to change HTML for that kind of things. You just need to find the correct CSS selector. Something like:

<style>
.nav li:nth-child(3) a {
  color: yellow;
}
</style>

According to HTML structure and your actual needs, there can be different ways of writing this. You can explore how to use CSS for your needs.

3

Thank you, Murat. Plese spend one more minute for me. In my case here is html of the page:

<div class="footer-links footer-links-desktop">
<ul class="footer-nav">
<li class="footer-nav-banana" data-label="Banana">
<a class="footer-nav-link hover-underline" href="link-1">Banana</a>
</li>
<li class="footer-nav-apple" data-label="Apple">
<a class="footer-nav-link hover-underline" href="link-2">Apple</a>
</li>
<li class="footer-nav-lemon" data-label="Lemon">
<a class="footer-nav-link hover-underline" href="link-3">Lemon</a>
</li>
</ul>

Will it be correct to put smth like this?

<style>
.footer-nav-lemon footer-nav-link li:lemon a {
  color: yellow;
}
</style>
4

Your target item already has a specific class name footer-nav-lemon. It’s much simpler then:

<style>
.footer-nav-lemon a {
  color: yellow;
}
</style>

If you’ll need that kind of optimizations very often, I would suggest you to have a look how CSS selectors work. It’ll pay back, for sure.

1 Like
5

Yes, I’ve put this into footer.css and my issue has solved.

Çok teşekkür ederiz!

1 Like