Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Change a single menu item's text color in WordPress/Elementor using css

I am new to css coding. I have a website buit in WordPress and Elementor. I am trying to change a single element’s text color using css. I found the specific class that was given to this element in the nav. I was able to change it’s background color, font-weight etc’, but I am unable to change the text color. Any thought as to why?

Tags:

2

Answers


  1. 0

    Just use !important for that menu item,
    like,

     .menu-item
            {
              color:#000000!important;
            }
    Login or Signup to reply.
  2. 0

    Welcome to CSS. Here is a good starting point ( https://www.w3schools.com/css/ )

    To change a color you need to specify the element eg.

    .element-class {
    color:blue;
}

    However if that element’s color is being changed by a selector with a higher priority specificity then it will not change. ( https://www.w3schools.com/css/css_specificity.asp )

    Also if a style with the same specificity is loaded after yours then it will use that one.

    You can use the !important tag to overide this but it is not best practice to do this. You are better to load your css classes after the already loaded class or increase the specificity of your selector.

    You can see the elements css classes applied by opening developer tools and inspecting the element (Chrome: Ctrl + Shift + C ) under the styles tags you can see the styles applied to the element as they will not be crossed out.

    styles

    In this example even though both elements have the same selector "H2" only the top is applied as it is on line 719 so it is loaded after the h2 style on line 28.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search