custom css option for menu item

Try and use the most specific CSS selector, to override other styles that may prevent your styles from working.

I’m pretty new at this so I’m not sure how to do what you are saying.

I understand, the first sentence within that ‘specific’ resource I linked is, “Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets”.

I re-read the document. The concept makes sense. My knowledge of css is poor. I just wanted a quick fix that would change the way my custom menu item looks. The custom ccss field seemed to be that fix. Specifically, what steps would you perform to change the way a custom menu item in a widget looks, for example… color?

How I would change for example, the custom menu background colour, I would (in order):

• Open the web page in Google Chrome browser
• Right click on the custom menu
• Left click on ‘Inspect element’
• Look at the CSS applied to that custom menu, on the right of the window. E.g look below element.style { }
• After finding what CSS the menu has applied to it, I would copy that CSS
• Then paste it in my child theme stylesheet
• Then remove all the styles I don’t want to change
• And change or add the new style

Okay…that was SUPER helpful. Thank you for your patience. I’ll try and do the same.

Just out of curiosity, why wouldn’t you use the custom css field to modify that single menu item?

I don’t know what you mean by custom css field, is this a certain part in the Dashboard where you put your CSS? If so, I only use that if I can’t be bothered to make a Child Theme, as out-of-habit I like to use external CSS.

The custom css field appears after you create a new menu and add a menu item to the custom menu. Opening the settings box for that menu item displays the title and other characteristics for the item, incliding a custom css field.

Sorry I don’t have preference to that, I’ve never used it.