Changing menu colours

Hi there,

this explanation may help:

https://generatepress.com/forums/topic/color-of-parent-item-changes-when-hovering-over-sub-item/#post-617604

Let me know

Hi David,

Hope all's well with you, it didn't help really in all honesty. I'm bad when it comes to CSS, I use Yellow Pencil to change mine. I thought I'd try customising via the customiser, but it only gives one colour (am wanting gradients) and although I can change the active colour, I can't change the current menu highlight (don't know what else to call it) the one that changes color at the top when you're hovering over a menu.

I can change CSS if I know the selector names, but when I added those into the CSS from the link, it didn't seem to change them?

https://pasteboard.co/HxuRb7c.png

https://pasteboard.co/HxuSknv.png

I'll play some more, but maybe if you could just let me know the selectors for the items I'm showing, I can take it from there?

Hi Michael, all good, sorry for the late reply - give this a shot:

.main-nav > ul > li:hover > a, .main-navigation .main-nav ul ul li:hover > a, .main-navigation .main-nav ul ul li:focus > a, .main-navigation .main-nav ul ul li.sfHover > a {
	background-image: linear-gradient(-180deg, #000046 0%, #1cb5e0 100%) !important;
}

Am afraid it's still not changing the active or the currently highlighted menu selection.

https://pasteboard.co/HxCB86H.png

I don't know if there's something overwriting the customise CSS? I don't think there is, I'll export my Pencil CSS and see if there's any menu CSS in there, but I don't think there is.

Wonder why? I mean, I appreciate for sure the help, but it's a bit crazy how it's not changing those.

I edited the code above with the parent included and with some importance.

Fantastic ! almost ! :)

Everything works, except the currently active section, so when I'm on the home page, it still leaves that grey, but the rest works. I'm happy with that.

Thanks David

Cool, add this selector string to that CSS Rule:

.main-navigation .main-nav ul li[class*="current-menu-"] > a

Genius ! working exactly as I wanted, thanks David. Officially awarded a Gold star :)

haha glad to be of assistance :)

https://pasteboard.co/HxMfQxr.png

:)

Haha why thank you. Its gonna be pinned to my wall... to cover off some of the bloopers i make lol

Well to err is human, to really mess things up needs a computer :) we all make them.