[Resolved] diferent menu items colors according to state

[Bogdan]

Hi Tom. What built-in classes should I use for the following scenario:
1. Primary Menu Items
2. when initially, all menu items have colour1
3. when hover, each menu item has different colour2, colour 3 etc.
4. when current, the respective item stays with its colour (from pt. 3 above), others revert to a common visited colour4

I know, may be unusual 🙂 Thanks in advance!

[Bogdan]

After reading other similar posts, i found this working:

Setting from customizer gives colour1.

/* for hover */
.main-navigation .main-nav ul li.my_class a:hover {
      color: #colour2;
}

/* for selected/current */
.main-navigation .main-nav ul li.current-menu-item.my_class a {
      color: #colour2;
}

Did not tried to solve colour4, works nice like this.
my_class is item-specific custom CSS class set in Menu Items.

• This reply was modified 7 years, 5 months ago by Tom.

[Tom]

Glad you were able to find a solution in the forum 🙂

[Author]

Posts