Changing sub-menu background colour for mobile devices

[TraceyR]

I have a test site which has a lot of white on it. (http://thesimplewebinarcompany.com/helenfn/)

When someone is using a mobile device, I'd like to colour the sub-menu backgrounds (whether being hovered over or not) to a subtle grey, so that they stand out a little better.

I can get this to work for the hovering part by using this code:

@media only screen and (max-width: 1100px) and (min-width: 567px) {
.genesis-nav-menu > li:hover .sub-menu a:hover, .genesis-nav-menu .sub-menu a:hover {
background-color: #ddd;
}
}

BUT I am struggling to get the same effect when the menu just drops down.

I have tried this:
.genesis-nav-menu > li .sub-menu a {
background-color: #ddd;
}

as well as this:
.genesis-nav-menu a {
background-color: #ddd;
}

to no avail... any suggestions I could try?

thanks,
Tracey

http://thesimplewebinarcompany.com/helenfn/

[Victor Font]

Your color is controlled by .nav-primary a

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[TraceyR]

I found the solution in the end, in case it's of use to anyone else:

.genesis-nav-menu > li:hover .sub-menu a,
.genesis-nav-menu .sub-menu a {
background-color: #ddd;
}

Thanks Victor, but I needed the sub-menu changing 🙂

[Author]

Posts