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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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>
