Can anyone tell me why the colour of “Slewing Rings” is not in red whilst the background colour is indeed in yellow? I’m sure I’m doing something incredibly stupid… but it is beyond me as to what it could be.
Screenshot showing elementor editor with menu bar
/* Decorate Slewing Rings in Menu */ .slewing-rings {
background-color:
yellow; color: red;
}
As always,
thank you.
Michelle
4
Answers
Maybe your text color is inheritance from parent element.
Try it
You need to style the child element which contains the “Slewing Rings” text, not the surrounding label box (which is what your .slewing-rings class is currently being applied to.) I can’t know your exact node-tree from that picture but if you right click and inspect element on that button, try to style the element which contains the text.
Now that you’ve provided your page link I can give more concise help:
The “a” tag needs to be targeted within your CSS. However, your website seems to be working as you intended, so you may have figured it out. It seems the elementor-item class is working to provide the red color.
You can do it in two ways:
1. You can give !important to css property like this
The class is added to the li item which is why your css doesn’t work.
Try this