[Resolved] Different hover colors in the off-canvas menu

Hi there,

you could try this:

1. In Customizer > Colors add a new Global Color, which we will use for the Off Canvas hover color.
Give it a name for that purpose eg. ofc-hover and set its hex to the current hover color you have.

This is going to create us the CSS variable of: --ofc-hover

1.1 Then edit the Off Canvas Panel Colors -> Navigation Text and set its Hover ( and Current if you want ) to your new color, in the color field it will be displayed like: var(--ofc-hover)

At this point there will be no change to your current menu colors.
Now for each menu item we need to give them a CSS class to change its colors:

2. Go to Appearance > Menus
2.1 activate the CSS Classes in your menu:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
2.2 Give each menu item a unique CSS Class – for example use the Navigation Label. eg. hemisdor seo annonsering etc.
2.3 Save the menu

With our unique classes we can now use CSS to swap the --ofc-hover values for another color. eg.

.seo {
    --ofc-hover: var(--accent-2);
}

This will replace our --ofc-hover color value with the value you have set in the accent-2 color in your global colors. For the menu item with the seo class.

.annonsering {
    --ofc-hover: var(--accent-3);
}

And another example for the annonsering menu item class.

Repeat for as many as you need.

i wished 🙂
Merry Christmas