WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Change color of one menu item

[Resolved] Change color of one menu item

  • I’ve seen a couple of different threads with similar questions, and have tried every version I could to get this to work, but I’m still stuck.

    My client needs the “online payment” tab on the vertical menu to be a different color than the rest so it stands out from the others. I have a custom menu created for it, and even added a css class to that specific tab, and added the changes I wanted into the style.css- but it’s still not doing anything.

    Does anyone else have any ideas or can tell me what step I am missing?
    http://www.texasmidwest.com is the website.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Try the !important rule

    Each menu item has it’s own “menu-item-###” id. Assign your CSS to that id.

    This is my code:

    .menu-item-420
    {
    background-color: #b27d5c !important;
    }
    Pretty simple.
    Thanks for the suggestion of the !important rule. I’ve noticed that it does the same thing with out without that however. All of my tabs have rounded corners, and I can see on the online payment tab, that the new background color is behind the green because I don’t have it set to have rounded corners… so I know it’s there… but it’s behind the regular color. How would I bring it to the front?

    Thanks for your responses so far! I really appreciate it.

    I should also add that I have tried the z-index option and that didn’t bring the color forward… but that’s the only thing I can think of that would make it work?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    It’s not the <li> that has the background, is it?

    Open your website in Google Chrome.
    Right click on your menu item.
    Select ‘Inspect element’.
    Behold the CSS and CSS selectors in particular (on the right of toolbar).

    I think you are actually right with your question.

    This is the code I get:
    ul.art-vmenu>li>a {
    background: #005754;
    background: linear-gradient(top, #002E2C 0, #008580 100%) no-repeat;
    background: -webkit-linear-gradient(top, #002E2C 0, #008580 100%) no-repeat;

    When I uncheck the two background areas, specifically the one with the linear gradient, all of the tab colors disappear, and then the brown background appears for the online payment tab.

    So, this is where things go over my head just a little bit since I don’t exactly understand how I would take that away from only that tab and not all of them.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Do you want to apply the background to the anchor or the <li> element?

    I only want the different colored background on the “online payment” tab. I would assume I don’t want it on the li element since that would change the background of all of the tabs? So that is why I added a class to the menu item itself. I hope that answers what you were asking.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Then you’ll need to override the background for that anchor (within that <li> element);

    ul.art-vmenu > li.menu-item-420 > a {
     background: none;
    }

    You see, all this has done is identified the <li> with the class, “menu-item-420”.

    Looking at it now, and how you explained it, that makes a whole lot more sense! And it worked perfectly. Thank you so much!

    A workaround that works for me is replace the ‘page’ item in the menu with a ‘link’ item, and then add formatting in the Navigation Label field.

    As such:

    <span style="color: #ff0000;">Specials</span>

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] Change color of one menu item’ is closed to new replies.
Skip to toolbar