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

Elementor – Why is menu item colour not changing but background is?

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

Tags:

4

Answers


  1. 0

    Maybe your text color is inheritance from parent element.

    Try it

    color: red !important;
    Login or Signup to reply.
  2. 0

    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.

    <div class="slewing-rings">
  <span>Your Text Is Probably Here</span>
</div>

    Now that you’ve provided your page link I can give more concise help:

    <li class="slewing-rings menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-171">
  <a href="https://michellepace.com/02/slewing-rings/" class="elementor-item has-submenu" id="sm-15723547752042446-1" aria-haspopup="true" aria-controls="sm-15723547752042446-2" aria-expanded="false">Slewing Rings<span class="sub-arrow"><i class="fa"></i></span></a>
</li>

    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.

    Login or Signup to reply.
  3. 0

    You can do it in two ways:
    1. You can give !important to css property like this

    /* Decorate Slewing Rings in Menu */ 
   .slewing-rings { 
     background-color: yellow; 
     color: red !important; 
    }
    1. You can give parent class with “.slewing-rings” class to change it priority.
    /* Decorate Slewing Rings in Menu */ 
   .parentClass .slewing-rings { 
     background-color: yellow; 
     color: red !important; 
    }
    Login or Signup to reply.
  4. 0

    The class is added to the li item which is why your css doesn’t work.

    Try this 

    .slewing-rings a {
   color: red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search