Make parent link inactive when submenu item is active

[neeta]

Hi,

I have a menu like this

Parent1
– child1
– child2

All are indiviual pages in wordpress.

What i want is:

when ‘child 2’ is active , its color should be red and and “parent1” color/bg should not change and vice versa.

Current scenerio: When child2 is active : Parent 1 is in active state and child2 is in inactive state.

NOTE: By inactive mode, i mean color/bg color

Can anybody help please !

Many thanks

[Mottie]

Hi @neeta!

Sadly, there are no parent selectors in css (see this post). The easiest option would be to always target the parent when adding and removing classes. For example, add a “child-1-active” or “child-2-active” and a “active” class to the parent when a child is active.

Or, maybe I misunderstood your question. If so, please provide an example on CodePen… include any relevant HTML, CSS and any javascript please.

[Author]

Posts