[Resolved] Menu Background Color for a Particular Item

[robmac]

Hi Tom/Leo,

Sorry to bug you, I’ve tried to use a recent similar job, where I received expert advise from Leo, to guide me through changing the background color of a particular Menu Item [“Santa’s Corner”] on my site.

I’m likely going to keep digging a deeper hole I think, so any help is appreciated please. My last attempt is below. I can fool-around with the desired color choices, it’s just the code any help would be appreciated please.

.main-navigation .top-bar ul li#434 a {
background-color: #CB4335;
}

.main-navigation .top-bar ul li.santas-corner a {
background-color: #CB4335;
}

.main-navigation .top-bar ul li.santas-corner a:hover {
background-color: #1D8348;
}

Thank you,
Robert

[Leo]

Hi Robert,

You are actually super close 🙂

Looks like the only thing missing the that you didn’t add the custom class santas-corner to that menu item:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

It should work once it’s added.

Let me know if not I can have another look.

[robmac]

Hi Leo,

Thanks for that, I entered the custom class, but sadly, no luck?

Any further help appreciated please.

Thank you,
Robert

[Leo]

Try this:

.top-bar .widget_nav_menu li.santas-corner a {
    background-color: #ffffff;
}

[robmac]

Awesome Leo….thank you….works well! Thanks again!

[Leo]

You’re very welcome 🙂

[Author]

Posts