CODEWITHSUNDEEP
htmlcsswordpressmenuwordpress-theming
Jeffrey Jade Portillo
Jeffrey Jade Portillo

Reputation: 67

How to change text color of the last two menus

I'm wondering how to change the color of the last two menus, what I want is instead of using black for the last two menus I want to use white.

URL: https://hrcstaging.wpengine.com/

enter image description here

the last two menus is designed like a button and I want to change the text color to white.

Upvotes: 0

Views: 339

Answers (7)

Thiago Lenzi
Thiago Lenzi

Reputation: 31

ok, for te last item menu:

.your_custom_menu ul li:last-child a{ /** your code here  */ }

for the item before the last:

.your_custom_menu ul li:last-child(2) a{ /** your code here  */ }

Upvotes: 0

liquidRock
liquidRock

Reputation: 357

If you want a more dynamic approach than using IDs, and your menu will retain the same number of list items, you can use pseudo classes. :nth-child should work. :nth-of-type might also work, but I'd use :nth-child.

#menu-primary-menu li:nth-child(7) a, #menu-primary-menu li:nth-child(8) a { color: white }

or

#menu-primary-menu li:nth-of-type(7) a, #menu-primary-menu li:nth-of-type(8) a { color: white }

In your case, if the IDs won't ever change, that's the easiest way, but it's good to know about pseudo classes in general.

Upvotes: 0

Jeffrey Jade Portillo
Jeffrey Jade Portillo

Reputation: 67

li#menu-item-4779 a, li#menu-item-4780 a  {
    color: white;
    font-weight: bold;
}

thanks guys I got the code and it works good now

Upvotes: 0

benCodeur
benCodeur

Reputation: 1

Kindly add two classes with the same name to your buttons. Do

.white{
  color: #fff;
}
<button class='white'>Verify Insurance</button>
<button class='white'>(704)-970-4106</button>

Mention that the button tag can be whatever html element with custom properties. It can be an a tag for example.

You can also replace the #fff code by the name of the color as #fff is the white hex code.

Upvotes: 0

Fra
Fra

Reputation: 62

You could add an ID to those elements and add a CSS property to them.

HTML:

<a id="white-link" href="#">Verify Insurance</a>
<a id="white-link" href="#">Number</a>

CSS:

a#white-link {
    color: white;
}

Demo

Upvotes: 1

Nexo
Nexo

Reputation: 2321

add this css to your css file.

.main-navigation .main-nav ul li:nth-last-child(2) a,.main-navigation .main-nav ul li:last-child a{
    color:#fff;
}

Upvotes: 0

Luis Moita
Luis Moita

Reputation: 67

with css you can use

button{
  color: #fff;
}

Or the buttons class, in this case it would be

.btnClass{
  color: #fff;
}

Upvotes: 0

Related Questions