Different background colours when hovering menu items

Hello @volkerh,

Thank you for reaching out,

Yes, this is definitely possible with a bit of custom CSS! Here’s how you can do it:

1. Go to WP Dashboard > Appearance > Menus.

2. In the top-right corner, click Screen Options and enable the CSS Classes option.

3. Now, you can assign a custom class to each top-level menu item (for example: menu-blue, menu-green, menu-red).

4. Then, use CSS to style each menu item and its submenu on hover.

Here’s an example of the CSS you can use:

.dropdown-menu li .sub-menu li.menu-blue:hover a {
    background-color: #0000e3;
    color: #fff;
}

.dropdown-menu li .sub-menu li.menu-red:hover a {
    background-color: #ed0000;
    color: #fff;
}

.dropdown-menu li .sub-menu li.menu-green:hover a {
    background-color: #00ed1b;
    color: #fff;
}

You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/

Hope it helps,
Best Regards

Hello @volkerh,

Thank you for the feedback,

You didn’t mention in your first message that you needed it for the top-level menu, so I didn’t include CSS for that in the example. The CSS above was just an example, you’ll need to write your own (but the method is the same as I explained above and you just need to find the correct CSS selector). The theme itself doesn’t include such a feature. Depending on the type of header you are using, the CSS may vary. Generally, you should assign a custom class like menu-color-red to the top-level menu item and then write CSS like the following:

.menu-color-red:hover {
    background: #f84040 !important;
}

Please let me know if you have any questions about the above steps.

Hope it helps,
Best Regards

Hello again,

Thank you so much for your kind words, I appreciate it.
I’m really glad to hear that everything is working just as you wanted.

If there is anything else we can help you with, please don’t hesitate to reach out to us.

Best Regards

Hello @volkerh,

Thank you for the update,

You need to write the CSS for it yourself in those custom classes; such an option does not exist in the theme. The CSS should apply on hover and then affect the link as well, like in this method:

.menu-color-red a { 
    color: #fff !important; 
}

Also, for hover:

.menu-color-red:hover a { 
    color: #fff !important; 
}

Note: You should make sure to write the CSS specifically for the menu. If it’s too general, it might affect other areas of the site as well.

Hope it helps,
Best Regards

Hello @volkerh,

Thank you for the update,

You are customizing it, and unfortunately, customization is not part of support. The CSS examples given are just clue to help you build what you want.

Use these selectore for “#site-navigation-wrap .dropdown-menu>li” for main and top level menu and use this one “.dropdown-menu li .sub-menu li.menu-item” for sub menus: https://ibb.co/QFGW99tC.

In general, you need to use Inspect Element and apply your own changes based on what you want:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools

Thank you for understanding,
Best Regards