Background Current + Hover Colour

Hi Ian,

Not sure I fully understand your question.

Any chance you can link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

I guess I am wondering if there is a way to control the Current Hover Page.

ie. When on page 1.html, the sub menu item show a Current colour. When I hover over this, I want it to show the hover colour like all sub menu items. Currently, hovering on a Current sub menu item (while on that page) does not trigger the hover colour. The sub menu item only show the Current colour even on Hover.

Hope that makes more sense.

Hi Ian,

try this CSS:

.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a {
    background-color: red;
    color: white;
}

replace the color values with the same ones you use on the hover value of noncurrent menu item. :D

As always, thank you for your input. I think that is for the main nav. Can you edit to target the submenu?

Try this. :D

.main-navigation .main-nav ul ul.sub-menu li[class*="current-menu-"]:hover > a {
    background-color: red;
    color: white;
}

Perfect! That totally worked. Thank you as always. I ended up disabling Background Current as well and now the submenu's are homogenous, thx!

Nice one. Glad you got it sorted. :D

How do I apply this for the canvas mobile menu as well? Need to set current page canvas menu item colour. This one:

.main-navigation .main-nav ul ul.sub-menu li[class*="current-menu-"]:hover > a {
background-color: red;
color: white;
}

Try this

#generate-slideout-menu .slideout-menu .sub-menu li[class*="current-menu-"]:hover > a {
    background-color: red !important;
    color: white;
}

Thx as always Elvin. My bad. What I wanted to change was the Current colour of the canvas menu item. Can you help me target this?

My bad! Made things too complicated. It was inside the Customizer all along. All good now!

Nice one. Glad you got it sorted. :D