›
Before you ask please READ THIS

Change color of single menu item link (without Elementor)

rifeprobuyerrifeprobuyer
in Rife Posts: 5
Dear Apollo 13 Team,

I am using Rife Pro on WP and I am not interested in using Elementor Page Builder for various reasons.

I want to change the text color of one single menu item.

I want to achieve this:
https://organicweb.com.au/wordpress/how-to-change-the-style-of-an-individual-menu-item/

I tried the above method to add custom css.

I added a custom CSS class under WordPress Menus for the mentioned menu item ".kaufen" and added this custom CSS to the Rife Pro custom CSS:


.kaufen {
color: #da291c !important;
background-color: #da291c;
}

Color: did not change anything. (Also without !important)
I added the background-color to check if I am addressing the right css class. Background color change works fine.

Inspecting the menu item I see that the color of (all) menu items is set by:
.top-menu li a, .top-menu li span.title {
color: #002d72;
}

If I change this
.top-menu li a, .top-menu li span.title {
color: #002d72;
}
I change the color of all menu links - which is not what I want. I only want to change the color of menu link that has css class "kaufen".

Comments

  • AirAir
    Posts: 10,970
    Hey there :-)

    Thanks for so much details! That helps a lot.

    In that case please try such custom CSS: 
    .top-menu li.kaufen a, .top-menu li.kaufen span.title {
    color: #da291c;
    background-color: #da291c;
}
    If this will not help, please send me to live link to your website and I will check what is going on.

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Quick Links

Categories

In this Discussion