Change a single Menu Item - CSS not accepted!

Hello all,

I want to redesign a single main menu item (the first one named “Courses”).

I added the name “menu-highlight” to the CSS class description of this single menu point in the menu admin.

Then I added following CSS in the customizer:

.menu-highlight {
color: #ffffff;
background: transparent;
border-color: #1172c4;
border-style: solid;
border-width: 2px;
border-radius: 50px;
padding: 0px 10px;
transition: all 0.2s linear;
line-height:45px;
}

Bit it does absolutely nothing! Funny thing: Background color works! But all the other CSS codes are not accepted.

Can you help me?

Try to target the link:
.menu-highlight a

Hello Avanti,

Thank you that works! BUT it also highlights the submenu items. I only want to highlight the main menu item, the submenu items habe to stay as they are.

Can you help me to fix this?

It will depend on the HTML markup of your site.
Share an URL so the code can be inspected, otherwise, it can only be guessing… and wasted time. :wink:

Good point :sweat_smile:

It is www.CleverMom.de

The first main menu item „Kurse & Programme“

I want to highlight „Kurse & Programme“ (That works with your code snippet :+1:)
But I want NOT to highlight The sub menu items (4 pcs).

Thanks a lot !

Hi!

In your menu markup structure, the link <a> you want to style is a direct child of the <li> element with the class menu-highlight.


So, to limit the style to this link and not affect the submenu’s links, you can add a child combinator > to the CSS selector like that:

.menu-highlight > a

More info here: https://css-tricks.com/child-and-sibling-selectors/

Thanks that’s it :+1:Super :+1: