Question 165389 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress: How to change text color of last 2 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.

Tags:

7

Answers


  1. Chosen as BEST ANSWER
    0 
    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


  2. 0

    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

    Login or Signup to reply.
  3. 0

    with css you can use

    button{
  color: #fff;
}

    Or the buttons class, in this case it would be

    .btnClass{
  color: #fff;
}
    Login or Signup to reply.
  4. 0

    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;
}
    Login or Signup to reply.
  5. 0

    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.

    Login or Signup to reply.
  6. 0

    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.

    Login or Signup to reply.
  7. 0

    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  */ }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search