[resolved] Change color of one menu item (12 posts)

  1. acdesgn
    Posted 3 years ago #

    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.

  2. Marvie Pons
    TutsKid Ninja
    Posted 3 years ago #

    Try the !important rule

  3. Ken Lewis
    Posted 3 years ago #

    Each menu item has it's own "menu-item-###" id. Assign your CSS to that id.

  4. acdesgn
    Posted 3 years ago #

    This is my code:

    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.

  5. acdesgn
    Posted 3 years ago #

    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?

  6. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    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).

  7. acdesgn
    Posted 3 years ago #

    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.

  8. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

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

  9. acdesgn
    Posted 3 years ago #

    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.

  10. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    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".

  11. acdesgn
    Posted 3 years ago #

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

  12. Anomaly69
    Posted 2 years ago #

    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>

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.