How to change hover colour?

Hi Kathryn,

After noting that the code did not have any effect, I have removed the code again. I have added it again.

I know the browser inspector, but I am always open for new information. Mostly I use Chrome, but also Firefox.

Thank you again for your help.

@johndelange55 – thank you for adding back the code!

I see the problem – apologies, there was a missing { on the first line in the code I provided you yesterday. Could you please replace it with this adjusted version with the necessary curly brace and let me know how it goes?

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

Feel free to adjust the colour code as you like.

In terms of using the inspector, two particular aspects that I find helpful here are: 1) the mobile simulator (aka responsive design mode), and 2) simulating the hover state and other “pseudo-classes.”

Here’s a screenshot showing where these are in the Firefox inspector:

Hi Kathryn, the menu hovering on the mobile phone works now with my desired colour. Perfect. Thank you for all your support. I appreciate that very much!!!!

Regarding the inspector, thank you for your tips. It will help me in the future.

Kind regards, John

That’s great, I’m glad that solved it!

Do feel free to start a new thread if you have any other questions. Cheers