CMCM
(Dennis)
April 24, 2020, 11:02am
1
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?
avanti
(Emmanuel Soyer)
April 24, 2020, 12:27pm
2
Try to target the link:
.menu-highlight a
CMCM
(Dennis)
April 24, 2020, 7:16pm
3
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?
avanti
(Emmanuel Soyer)
April 24, 2020, 9:17pm
4
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.
CMCM
(Dennis)
April 25, 2020, 6:24am
5
Good point
It is www.CleverMom.de
The first main menu item „Kurse & Programme“
I want to highlight „Kurse & Programme“ (That works with your code snippet )
But I want NOT to highlight The sub menu items (4 pcs).
Thanks a lot !
avanti
(Emmanuel Soyer)
April 25, 2020, 8:40am
6
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: Child and Sibling Selectors | CSS-Tricks - CSS-Tricks