Change color of one menu button?

[SafeInSanity]

Is it possible to change the color of just one button in the top navigation menu to a different color than the others without using a plugin?

[Retread]

Feb 12, 2020 4:51:35 GMT -8 SafeInSanity said:

Is it possible to change the color of just one button in the top navigation menu to a different color than the others without using a plugin?

I think so. It depends on how you identify the particular button. Also, you said color, so my examples will change the color of the text. If you meant the background color, just use background-color instead of color.


If we wanted to change the color for all of the buttons in the Nav menu, we could add this to the bottom of the Style Sheet:
#navigation-menu > ul li a{color:Orange;}

If we wanted to change the color for only the second button in the Nav menu:
#navigation-menu > ul li:nth-child(2) a{color:Yellow;}

Some (not all) links in the Nav menu have an accesskey attribute. So if we wanted to target just the Search button in the nav menu:
#navigation-menu > ul li a[accesskey="4"]{color:Red;}

But the most certain and universal way to uniquely identify a specific button would probably be by targeting the href attribute of the link. In this example, the link to the Admin panel:
#navigation-menu > ul li a[href="/admin"]{color:Green;}

Let me know how that works out for you, please.

[CrazyBoy]

Hi Retread I have a question about
#navigation-menu > ul li:nth-child(2) a{color:Yellow;}
Is it possible to change the third by
#navigation-menu > ul li:nth-child(3) a{color:Yellow;}

[elli]

Feb 12, 2020 8:03:25 GMT -8 CrazyBoy said:

Hi Retread I have a question about
#navigation-menu > ul li:nth-child(2) a{color:Yellow;}
Is it possible to change the third by
#navigation-menu > ul li:nth-child(3) a{color:Yellow;}

Yes. :nth-child selects any child by that number, as long as it exists.

css-tricks.com/almanac/selectors/n/nth-child/
css-tricks.com/examples/nth-child-tester/#

[SafeInSanity]

Feb 12, 2020 6:35:47 GMT -8 Retread said:

Feb 12, 2020 4:51:35 GMT -8 SafeInSanity said:

Is it possible to change the color of just one button in the top navigation menu to a different color than the others without using a plugin?

I think so. It depends on how you identify the particular button. Also, you said color, so my examples will change the color of the text. If you meant the background color, just use background-color instead of color.


But the most certain and universal way to uniquely identify a specific button would probably be by targeting the href attribute of the link. In this example, the link to the Admin panel:
#navigation-menu > ul li a[href="/admin"]{color:Green;}

Let me know how that works out for you, please.

Where would I add this code?  bottom of stylesheet? ... thanks (I figured it out)

Ok, it is working when I put (/admin) for the href but when I put my custom link (/threads/recent) it does not. Strange.

Wait, I got it working by entering the complete link to my page. Thank you so much for the code! Retread

[Retread]

You're welcome, SafeInSanity

And we should thank elli for her contribution to this thread, especially the most excellent links she provided. The first one goes into more depth and includes an excellent filter trick. The second one has an amazing visual tool. I encourage you to take a look at those and take advantage of 'teaching moments' like this. More than just solving the immediate problem, understanding how these things work will help you with future challenges.

Feb 12, 2020 14:40:41 GMT -8 SafeInSanity said:

Where would I add this code?  bottom of stylesheet? ... thanks (I figured it out)

Ok, it is working when I put (/admin) for the href but when I put my custom link (/threads/recent) it does not. Strange.

Wait, I got it working by entering the complete link to my page. Thank you so much for the code! Retread

Hmmm. It really shouldn't work that way.

When you add links to your Nav menu via the Navigation tab...
Admin Home> Settings> Forum Settings> Navigation
... the first part (forum address) should be removed before it hits the page, even if you were explicit, leaving you with just /threads/recent as the href.

Maybe you created that custom link on your own and added it in a layout template?

Anyway, if you want to make things a bit more brief in your Style Sheet, you can use a slightly less precise Attribute Selector.

Instead of;
[href="/posts/recent"]
which is expecting the href to be exactly /posts/recent,
you could use:
[href*="/posts/recent"]
which will accept any href as long as it contains /posts/recent.

developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors