0

I'm trying to target my parent menu item through only 1 of my submenu items. The thing is, I only know how to target classes IN classes, not backwards. And I only want to target this parent through 1 of the submenus, not all of them.

The reason: I have a sub menu item that is visible in more than one parent menu. When this sub page is active "lid worden", all the parents become active. So you will never know in what main menu you are as a visitor. For this single page, I want to turn off the active style of the parent. I already gave this single sub menu item a different class (.menu-lidworden). So the css must be something like this

.sub-menu.menu-lidworden.current_page_item --> .current-menu-parent
{ font-weight:normal etc... some other styles;}

I made 2 printscreens since the website is still under construction and offline.
https://dekeienatletiek.nl/hanneke/main-menu.png
https://dekeienatletiek.nl/hanneke/main-menu-html.png

As you can see, the menu "lid worden" is in the parent "nieuws & uitslagen" but also in "over the keien". In the future it will be in almost all the parents. As I explained before, all of them will be active because of this. And I dont want that.

Hope somebody can help me with this. Thank you in advance

Hanneke Verhoeven
  • 1

1 Answers1

0

You can try some javascript , by calling a function when triggering the click event (or other events depending on what you need ) , this function check all the parents elements and remove any active CSS classes from them , and then assign the CSS classes to the parent only .

Chakib Salah
  • 499
  • 1
  • 10
  • Thank you for your answer. I'm not a developer. I know how to make a wordpress website and change the looks with css and html. But javascript is out of my league. So I understand what your saying, but im not able to create anything like that – Hanneke Verhoeven Feb 25 '22 at 09:45