changing color of specific individual menu item

DanielNolan

Hello is there any way to change the background color (on hover)  of a specific, individual menu item?

Pablo

Hello,

It will be possible, but only with the CSS code, do you need help with it?

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

yes please thanks pablo!, also thanks for your other answers, they have really helped so far

Pablo

Can you send me a link to your website?

It will be the best way to explain you that

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

I am sorry the website is www.refillnation.org

Pablo

First of all, please go to the Appearance > Menus and apply the CSS Class to menu item.

If you do not see field dedicated to if, enable it on the "Screen Options" in accordion in the top of the screen.

https://prnt.sc/uiwxxn

Then, use this css code, remember to change the myCustomLink to your CSS class

html body .myCustomLink a{background:red !important;}

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

Hello, this works, but it changes the menu text and I wanted to change the background color when I hover over it

Pablo

Oh sure, my bad.

I updated the code above

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

haha, thanks pablo but this code creates a red box around them without hovering. I want it to create the red box around them ON HOVER... haha thanks so much!

Pablo

Sorry, again )

Please use this one instead:

html body .myCustomLink a:hover{background:red !important;}

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

Thanks Pablo, can you also tell me how to change the color of the active button to red as well?

Pablo

For special button too? Or globally?

Globally -> Theme Options > Colors > Menu, there you will find the "Menu item active" color.

Special -> Add the '.current-menu-item' to 'a' element (a.current-menu-item)

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

Hi pablo,

I tried this 

    html body .myCustomLink a.current-menu-item {background: #89bbc7 !important;}

but it did not work, did I do it wrong?

Pablo

On which page are you doing that?

I'll check in the source code what's the problem.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

Hello, I have just reinstalled the demo site at refillnation.org. Just the main menu. Sorry about this.

Pablo

In your case it will be:

html body li.myCustomLink.current-menu-item a{background: #89bbc7 !important;}

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next