How to change hover colour?

Hi @johndelange55 – this custom CSS should take care of the hover background colour on your sub-menus:

/* Sub-menu hovers */
ul.nav-menu ul a:hover, 
.nav-menu ul ul a:hover, 
ul.nav-menu ul a:focus, 
.nav-menu ul ul a:focus {
  background-color: #c85794;
}

Let me know how it goes!

Hi Kathryn, thank you for your fast and clear response.
However I don’t see any effect. I have put your phrase into the Extra CSS part. The hover colour remains red.
Do you have any other suggestion?

Kind regards,
John

Hi @johndelange55 – hmm, I don’t see the custom CSS I provided in your custom CSS area. This is all that’s currently in there:

Would you please try adding it again under Appearance > Customize > Additional CSS? Be sure to save your Customizer changes, and be sure your Customizer revision isn’t set to “draft.”

Let me know how it goes!

Hi Kathryn, I did not save it. I had only tried it in the customizer.
After publishing I notice that it works. Great. Thank you very much.

Kind regards,
John

By the way Kathryn, is there also a way to change the colour of the text of the active menu item? That is also red now. I want to give it another colour.

Thank you in advance.

Hi Kathryn, your hover solution works perfect on laptop and tablet. However on phone it is still red. Do you also have a suggestion for a solution on that device? Would be great.

Hi @johndelange55 – glad that worked after saving!

By the way Kathryn, is there also a way to change the colour of the text of the active menu item? That is also red now. I want to give it another colour.

Sure, give this a try:

/* Current menu item/ancestor - top level */
.nav-menu .current_page_item > a, 
.nav-menu .current_page_ancestor > a, 
.nav-menu .current-menu-item > a, 
.nav-menu .current-menu-ancestor > a {
  color: #ffffff;
}

/* Current menu item - submenu */
.nav-menu .sub-menu .current_page_item > a, 
.nav-menu .sub-menu .current-menu-item > a {
  color: #c85794;
}

Hi Kathryn, perfect. This is the right solution. Thank you very much for your support!!!!!

Hi Kathryn, perfect. This is the right solution. Thank you very much for your support!!!!!

Yay, I’m glad, and you’re very welcome!

Just let me know if you were still looking to make any tweaks for phone display, or whether things look like what you wanted after the last CSS addition.

Hi Kathryn, can I disturb you once again. On the phone platform you don’t have a horizontal menu bar, but a dropdown menu. In some situations on the phone you see a red bar when hovering. Do you have also a solution for this situation?

Hi @johndelange55

On the phone platform you don’t have a horizontal menu bar, but a dropdown menu. In some situations on the phone you see a red bar when hovering.

Are you referring to the mobile menu button itself? If so, this one’s a little tricky to target on my computer, but let me know if this works!

/* Mobile menu button toggle */
button.menu-toggle:active {
  background: #c85794;
}

Hi Kathryn, no I am referring to the focus of the menu item when hovering over the dropdown menu on the phone. I don’t see any effect with your proposal.
By the way, this “problem” is not so important to solve, because our users normally don’t see this, only when they use the “return to previous page” button on their phone.

@johndelange55 Ah, I think I see the issue! Could you please try this and let me know?

/* Mobile menu hover */
@media (max-width: 643px)
  .toggled-on .nav-menu > li a:hover, 
  .toggled-on .nav-menu > ul a:hover {
    background-color: #c85794;
  }
}

Change c85794 to your preferred hover colour code.

Hi Kathryn, thank you again for your suggestion. However I don’t see any effect when using this code. Do you have any other suggestion? (perhaps using class dropdown-content?)

By the way, where can I find all classes you use? Is that in W3schools?

Kind regards,
John

Hi @johndelange55 –

However I don’t see any effect when using this code.

Hmm, I don’t see the new CSS code I provided on your site at the moment. Would you mind adding it again so I can take another look directly?

By the way, where can I find all classes you use?

I’m using the browser inspector to examine your site’s code to find the right classes. Most browsers have an inspector built in; I use Firefox but there’s also a good one in Chrome. If you’re using Safari, you’ll need to activate the inspector manually.

Let me know what browser you use and I’d be glad to send you a resource or two about using its inspector!